使用prev（）查找項目編號？

Question

你有這樣

<li>1</li> 
<li>2</li> 
<li>3</li> 
<li class="seperator">...</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 

DOM如何計算的頂部和底部的項目數？

Answer 1

假設他們都在單親父母身邊，有幾種方法。您可以使用prevAll的問題之前，並期待在長度：

var previousCount = $(".seperator").prevAll().length; 

而對於那些後，它的nextAll：

var nextCount = $(".seperator").nextAll().length; 

例  —請注意，我改變了你的HTML稍微等等我們沒有對雙方相同的號碼，所以我們知道它的工作：

console.log("Before:", $(".seperator").prevAll().length); 
 
console.log("After:", $(".seperator").nextAll().length);

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li class="seperator">...</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li><!-- I added this one --> 
 
</ul> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

邊注：正確的拼寫是 「分離」（一個 'E'，兩個 '一的），而不是 「分隔符」（二' E的，一個 'A'），但我保留你的上面的拼寫。

Answer 2

在分離器開始，用prevAll()和nextAll()得到集合，然後使用它們的長度

var topCount = $('.seperator').prevAll().length 

var bottomCount = $('.seperator').nextAll().length 

Answer 3

可以使用prevAll（）來獲得元件的前面的兄弟姐妹中匹配的元素集合和nextAll的（）獲取該元素的下面的兄弟姐妹匹配的元素集合

的

閱讀：http://api.jquery.com/prevall/

和http://api.jquery.com/nextall/

console.log($(".seperator").prevAll("li").length); 
 
console.log($(".seperator").nextAll("li").length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li>1</li> 
 
<li>2</li> 
 
<li>3</li> 
 
<li class="seperator">...</li> 
 
<li>4</li> 
 
<li>5</li> 
 
<li>6</li>

Answer 4

您可以使用prevAll和nextAll如已經在其他的答案中提到，或者您可以使用index()並基於ul的長度得到的值：

prev = $('.seperator').index(); 
 
next = $('ul li').length - $('.seperator').index() - 1; 
 
console.log(prev); 
 
console.log(next);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li class="seperator">...</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>