jQuery: Count children of several elements and calculate

Question

Hi there

I'm making a website for a restaurant, where they want to make "room" in the menu, by starting the numbering with the following "5".

Example:
Starter
1.
2.

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

Pizza
15.
17.

I want to count the numbers of TABLEs within a DIV, give the tables this number, then count the number of TRs within the TABLEs, add it all together and write it in the first TD.

When second TABLE is added, it will take the last number, from the previous TABLE (ex. 3) and find the next 5. In this case "5". If the last number was 6, the number of the next table would be 10.

Does it make sense?

<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

Check out http://api.jquery.com/length/ , with a little tweaking you should be able to accomplish what you want.

Answer 2

jQuery selectors that have more than one match will return a jquery object you can use like an array. In your case, the selector $('#menu table') will give you an array of every table... check out the jQuery Selector Reference for how you can get the TR elements as well.

But I'd like to propose that with your situation, choosing the right tools may make your life a lot easier. In this case, have you considered using an ordered list instead of tables? Ordered lists have some great attributes, such as SEQNUM which'll let you start the numbering form any number you want. So there's less math to do. just select each ordered list, count the number of list items, and set the SEQNUM to that number.

So your structure is now:

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

the jQuery i'll leave as an exercise in jQuery...

now if you don't want to write jQuery, then just do <ol CONTINUE> instead of <ol> and it'll do all the numbers for you.

Answer 3

Something like the following (if I understand the question correctly)

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