jQuery: подсчитать потомков нескольких элементов и вычислить

Question

Я делаю сайт для ресторана, где они хотят сделать «комнату» в меню, начиная нумерацию со следующей «5».

Example:
Starter
1.
2.

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

Pizza
15.
17.

Я хочу подсчитать количество ТАБЛИЦ в DIV, дать этим таблицам это число, затем подсчитать количество 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 , чтобы узнать, как получить элементы TR.

НоЯ хотел бы предложить, что в вашей ситуации выбор правильных инструментов может значительно облегчить вашу жизнь.В этом случае вы рассматривали возможность использования упорядоченного списка вместо таблиц?Упорядоченные списки имеют некоторые отличные атрибуты, такие как 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

Что-то вроде следующего (если я правильно понял вопрос)

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

Answer 3

Проверьте http://api.jquery.com/length/, с небольшой настройкой вы сможете выполнить то, что вы хотите.