如何判断一个div是jquery中另一个div的前一个或旁边？

Question

我在序列中有5个div和相应的id，其中包含以下ID（divele1，divele2，divele3，divele4，divele5）。现在我有两个div与with和现在我比较一个div是前一个div还是另一个div的net元素。

ex：我有divele3和divele5。现在我想比较divele5是divele3的上一个或下一个元素。

关于相同的任何建议

Answer 1

假设所有div元素都是同一容器的子元素，如下所示：

<div class="container">
    <div id="divele1">devele1</div>
    <div id="divele2">devele2</div>
    <div id="divele3">devele3</div>
    <div id="divele4">devele4</div>
    <div id="divele5">devele5</div>
</div>

然后，您只需使用index()来比较序数位置。例如：

var $div5 = $('#divele5');
var $div3 = $('#divele3');

if ($div3.index() < $div5.index()) {
    console.log('3 is before 5');
} else {
    console.log('5 is before 3');
}

如果#diveleX div不是DOM的同一级别的兄弟，那么你需要给它们所有的公共类名，然后在index()方法中使用它，如下所示：

<div id="divele1" class="divele" />

$('#divele1').index('.divele');

Answer 2

~ CSS selector选择接下来的同级，因此，如果您可以选择#diveleX ~ #diveleY之类的内容，则表示 Y 下一个到 X 否则之前。

示例：

＆＃13;

＆＃13;

if ( document.querySelector( '#divele3 ~ #divele5' ) ) {
  console.log("divele5 is next to divele3");    // Print this
}
else {
  console.log("divele5 is before to divele 3");
}

if ( document.querySelector( '#divele4 ~ #divele3' ) ) {
  console.log("divele3 is next to divele4");
}
else {
  console.log("divele3 is before to divele4");    // Print this
}

＆＃13;

#test > div {
  border: 1px solid red;
  height: 20px;
  margin: 5px;
}

＆＃13;

<div id="test">
    <div id="divele1">1</div>
    <div id="divele2">2</div>
    <div id="divele3">3</div>
    <div id="divele4">4</div>
    <div id="divele5">5</div>
</div>

＆＃13;

＆＃13;

＆＃13;