代码之家 › 专栏 › 技术社区 › curly_brackets

jquery:计算多个元素的子元素并计算

css3 jquery javascript

2

curly_brackets · 技术社区 · 14 年前

我正在为一家餐馆建立一个网站,他们想在菜单中设置“房间”,从下面的“5”开始编号。

Example:
Starter
1.
2.

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

Pizza
15.
17.

我想计算一个DIV中的表的数量,给这些表这个数字,然后计算表中的TRS数量,把它们加在一起,然后把它写在第一个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>

3 回复 | 直到 12 年前

1

3

pxl 14 年前

具有多个匹配项的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> 它会为你做所有的数字。

2

0

tomsseisums 14 年前

退房 http://api.jquery.com/length/ 稍微调整一下,你应该能够完成你想要的。

3

0

fearofawhackplanet 14 年前

如下(如果我正确理解问题)

â$(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;
   });
});â