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だ：私は少しので、あなたのHTMLを変更した

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

例  —ノートは、

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>

：我々は両側で同じ番号を持っていないので、我々はそれが働いている知っています は

---

サイドノート：正しい綴りは、 "区切り"（1 'E'、2つの 'の）ではなく、 "区切り文字"（2つの' E年代、1 'A'）ですが、私はあなたを保持してきました上記のスペル

Answer 2

セパレータで開始してから、マッチした要素とnextAll（のセット内の要素の前の兄弟を取得するprevAll（）を使用することができ

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>