Question

我正在为一家餐馆制作一个网站，他们希望在菜单中创建“空间”，方法是使用以下“5”开始编号。

Example:
Starter
1.
2.

Salads
5.
6.
7.
8.
9.
10.
11.

Pizza
15.
17.

我想计算DIV中TABLE的数量，给表这个数字，然后计算TABLE中TR的数量，将它们全部加在一起并在第一个TD中写入。

当添加第二个TABLE时，它将从前一个TABLE（例如3）获取最后一个数字并找到下一个5.在这种情况下为“5”。如果最后一个数字是6，则下一个表的编号将是10。

有意义吗？

<div id="menu">
      <table>
        <tr>
          <td>1</td> //first table (1) + 1 - 1 = 1
        </tr>
        <tr>
          <td>2</td>  //last number + 1 = 2
        </tr>
        <tr>
          <td>3</td>  //last number + 1 = 3
        </tr>
      </table>

      <table>
        <tr>
          <td>5</td> //last number from above (3) and find next 5 (5) =  5
        </tr>
        <tr>
          <td>6</td> //last number + 1 = 6
        </tr>
        <tr>
          <td>7</td> //last number + 1 = 7
        </tr>
        <tr>
          <td>8</td> //last number + 1 = 8
        </tr>
        <tr>
          <td>9</td> //last number + 1 = 9
        </tr>
        <tr>
          <td>10</td> //last number + 1 = 10
        </tr>
        <tr>
          <td>11</td> //last number + 1 = 11
        </tr>
      </table>

      <table>
        <tr>
          <td>15</td> //last number from above (11) and find next 5 (15) =  15
        </tr>
        <tr>
          <td>16</td> //last number + 1 = 16
        </tr>
        <tr>
          <td>17</td> //last number + 1 = 17
        </tr>
      </table>
    </div>

Answer 1

具有多个匹配项的jQuery选择器将返回一个可以像数组一样使用的jquery对象。在您的情况下，选择器$('#menu table')将为您提供每个表的数组...查看jQuery Selector Reference以了解如何获取TR元素。

但我想建议，根据您的情况，选择合适的工具可能会让您的生活更轻松。在这种情况下，您是否考虑使用ordered list而不是表格？有序列表具有一些很好的属性，例如SEQNUM，可以让您从任何数字开始编号形式。所以要做的数学要少。只需选择每个有序列表，计算列表项的数量，并将SEQNUM设置为该数字。

所以你的结构现在是：

<div id="menu">
      <ol>
        <lh>Starter</lh>
        <li>starter item</li>
        <li>starter item</li>
        <li>starter item</li>
      </ol>

     <ol>
        <lh>Salad</lh>
        <li>salad item</li>
        <li>salad item</li>
        <li>salad item</li>
      </ol>

      <ol>
        <lh>Pizza</lh>
        <li>pizza item</li>
        <li>pizza item</li>
        <li>pizza item</li>
      </ol>
    </div>

jQuery我将在jQuery中留下练习...

现在如果您不想编写jQuery，那么只需<ol CONTINUE>代替<ol>，它就会为您完成所有数字。

Answer 2

查看http://api.jquery.com/length/，稍微调整一下，你应该能够完成你想要的任务。

Answer 3

如下所示（如果我理解正确的话）

$(document).ready(function() {

   var count = 1

   $.each($('#menu table'), function() {
        $(this).find('td').each(function() {
            $(this).html(count);
            count++;
        });
        count = Math.round(count/10) * 10 + 5;
   });
});

jQuery：计算几个元素的子元素并计算

3 个答案: