JS - 我可以获取下一个打开的 div 元素 - 不是兄弟姐妹

Question

是否可以仅使用 JS（或者可能使用 jQuery）来获取下一个 open html 元素？

在下面的代码片段中，如果我单击任何 div，它将给我 div 的 id。我希望它获得 next 开放元素 ID，例如

如果我点击 page123 它应该给我 123efter 如果我点击 123efter 它应该给我 13

我不想要封装 div 中的下一个兄弟姐妹，这就是我到目前为止所做的一切！

document.addEventListener("click", function(event) {
console.log(event.target.id);
}
);

.efter{
min-height:20px;
}
.efter:hover{
background-color:beige;
}

<div>
  <div id="1">
    home
    <div id="1efter" class="efter"></div>
    <div id="11">
      page11
      <div id="11efter" class="efter"></div>
    </div>
    <div id="12">
      page12
      <div id="12efter" class="efter"></div>
      <div id="121">
        page121
        <div id="121efter" class="efter"></div>
      </div>
      <div id="122">
        page122
        <div id="122efter" class="efter"></div>
      </div>
      <div id="123">
        page123
        <div id="123efter" class="efter"></div>
      </div>
    </div>
    <div id="13">
      page13
      <div id="13efter" class="efter"></div>
    </div>
  </div>
</div>

Answer 1

我首先使用所有现有的 div id 创建一个平面数组 divs。然后在点击事件处理程序中查找被点击元素的后继 id.

const divs=[...document.body.querySelectorAll("div")].map(d=>d.id);
document.addEventListener("click", function(event) {
console.log(divs[divs.indexOf(event.target.id)+1]);
}
);

.efter{
min-height:20px;
}
.efter:hover{
background-color:beige;
}

<div>
  <div id="1">
    home
    <div id="1efter" class="efter"></div>
    <div id="11">
      page11
      <div id="11efter" class="efter"></div>
    </div>
    <div id="12">
      page12
      <div id="12efter" class="efter"></div>
      <div id="121">
        page121
        <div id="121efter" class="efter"></div>
      </div>
      <div id="122">
        page122
        <div id="122efter" class="efter"></div>
      </div>
      <div id="123">
        page123
        <div id="123efter" class="efter"></div>
      </div>
    </div>
    <div id="13">
      page13
      <div id="13efter" class="efter"></div>
    </div>
  </div>
</div>

Answer 2

作为替代方案，如标记 jquery，您可以使用 jquery 的 collection.index(element) 重载来获取集合中的索引。

作为一个班轮：

console.log($("div").eq($("div").index(this) + 1))

更新的代码段：

$("div").click(function(evt) {
   evt.stopPropagation();
   
   // Get once so it's not run multiple times
   var divs = $("div");
   var idx = divs.index(this);
   var result = divs.eq(idx+1)
   
   // do something to demo
   console.log(idx, result.attr("id"));
   $(".active").removeClass("active");
   result.addClass("active");
});

.efter{
min-height:20px;
}
.efter:hover{
background-color:beige;
}
.active { background-color:yellow; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div id="1">
    home
    <div id="1efter" class="efter"></div>
    <div id="11">
      page11
      <div id="11efter" class="efter"></div>
    </div>
    <div id="12">
      page12
      <div id="12efter" class="efter"></div>
      <div id="121">
        page121
        <div id="121efter" class="efter"></div>
      </div>
      <div id="122">
        page122
        <div id="122efter" class="efter"></div>
      </div>
      <div id="123">
        page123
        <div id="123efter" class="efter"></div>
      </div>
    </div>
    <div id="13">
      page13
      <div id="13efter" class="efter"></div>
    </div>
  </div>
</div>

JS - 我可以获取下一个打开的 div 元素 - 不是兄弟姐妹

JS - Can I get the next open div element - Not the sibling

html

javascript

jquery