如何判斷一個div是jquery中另一個div的前一個或旁邊？

Question

我在序列中有5個div和相應的id，其中包含以下ID（divele1，divele2，divele3，divele4，divele5）。 現在我有兩個div與with和現在我比較一個div是前一個還是另一個div的net元素。

例如：我有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這樣的#diveleX ~ #diveleY意味着Y在X 旁邊 ，否則就在前面 。

例：

 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 } 

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

 <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>