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

您将要访问每个 menu-item，然后遍历其中的每个 h3。这样，.each() 函数中的 i 会为每个 menu-item 重置：

$('.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 2

你应该 "scope" i 在每个 .menu-item 里面。

试试：

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

Answer 3

您可以使用 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')。

jQuery 中的计数

Numeration in jQuery

javascript

each

jquery