jQuery中的枚舉

Question

我想在jQuery中實現計數。 我當前的代碼工作正常，但適用於每個div（.menu-item），我需要分別使用。

我當前的代碼：

$('.menu-item h3').each(function (i) {

    ++i;

    $(this).find('span').text(i + '.');

});

當前效果：

.menu-item
    1.
    2.
    3.

menu-item#2
    4.
    5.
    6.

需要：

.menu-item
    1.
    2.
    3.

menu-item#2
    1.
    2.
    3.

HTML代碼：

<div class="menu-item">
 <table>
  <tr>
   <td>
    <h3><span></span> Title</h3>
   </td> 
  </tr>
 </table>
</div>

Answer 1

您可以使用jQuery的.index()函數執行此操作，因為默認情況下.index()僅查看同級元素：

 $('.menu-item h3').each(function () { $(this).find('span').text($(this).index()+1); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="menu-item"> <h3> <span></span> </h3> <h3> <span></span> </h3> <h3> <span></span> </h3> </div> <div class="menu-item"> <h3> <span></span> </h3> <h3> <span></span> </h3> <h3> <span></span> </h3> </div> 

看到HTML之后，可以使用$('.menu-item tr')代替$('.menu-item h3') 。

Answer 2

您將要轉到每個menu-item ，然后h3該menu-item每個h3 。 這樣， .each()您擁有的每個menu-item重置.each()函數中的i ：

 $('.menu-item').each(function () { $(this).find("h3").each(function(i) { $(this).find('span').text(++i + '.'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="menu-item"> <h3> <span></span> </h3> <h3> <span></span> </h3> <h3> <span></span> </h3> </div> <div class="menu-item"> <h3> <span></span> </h3> <h3> <span></span> </h3> <h3> <span></span> </h3> </div> 

Answer 3

您應該在每個.menu-item “ .menu-item ” i 。

嘗試：

$('.menu-item').each(function(index, $item){
    $item.find('h3').each(function(index, $h3) {
        $h3.find('span').text(++i + '.');
    });
});