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()仅查看兄弟元素：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

您需要转到每个menu-item，然后查看每个h3。这样，i函数中的.each()会为您拥有的每个menu-item重置：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你应该＆＃34;范围＆＃34;每个i内.menu-item。

尝试：

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

jQuery中的数字

3 个答案: