javascript - jQuery:计算多个元素的子元素并计算

Question

我正在为一家餐厅制作一个网站，他们希望通过以下“5”开始编号来在菜单中腾出“空间”。

Example:
Starter
1.
2.

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

Pizza
15.
17.

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

当添加第二个表时，它将从前一个表(例如 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而不是 table ？有序列表有一些很棒的属性，例如 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>它会为您完成所有的任务。