jquery: Find and loop through all spans with certain ID within a div?

Question

I have a list that is numbered for each item (1,2,3,4..). I have a function that removes items but when it removes an item the list numbers are not in order anymore (1,3,4...).

What I am trying to do is find all spans starting with "id_" and get the full ID so can can reset the numbers to the correct order.

$('[id^="table_"]').each(function(index, table){

});

The way I am trying to do it I cannot figure out how to get the ID of the span.

<div id="list">

  <div id="list_1">
    <table border="0" width="100%" id="table_1">
      <tbody>
        <tr>
          <td>
            <span id="id_1">1</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="list_2">
    <table border="0" width="100%" id="table_2">
      <tbody>
        <tr>
          <td>
            <span id="id_2">2</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

Thanks

UPDATED

Ok I have taken a bits from each post to get this

var i = 1;

$('span[id^="id_"]', "#list").each(function(index){

   var id = this.id;
   $('#'+id).html(i+'. ');

   i++;

});

Thanks all for you help.

Answer 1

Update I missed that you already had an each loop. It looks fine except you seem to be looking for ids starting with "table_", but you don't have any (you have "list_" and "id_"). Also, you're doing it completely unbounded, which will probably be quite a lot of work. The more narrow the selector can be, the better (usually).

The way I am trying to do it I cannot figure out how to get the ID of the span.

Within an each loop, the id of the DOM element is available as this.id.

My original answer addresses how to do this with the markup you quoted.

---

Original answer:

jQuery has the "attribute starts with" selector, so you can find all the children that are spans with an id starting with "id_" and then loop through assigning new IDs to them:

$("#list").find('span[id^="id_"]').each(function(index) {
    this.id = "id_" + (index + 1);
});

That uses find to find them, then each to loop through them. I assumed there you wanted to start the numbering with 1 rather than with 0, hence adding one to the index that jQuery passes into each. Assigning the IDs can be done with the raw DOM element (thisin theeach` callback) as there's nothing complicated about it.

Although actually, you don't need a separate call to find, you can just use a descendant selector:

$('#list span[id^="id_"]').each(function(index) {
    this.id = "id_" + (index + 1);
});

Live example

---

Further update: If you really want to have fun, you can renumber the lists, the tables within the lists, and the spans within the tables:

$('#list div[id^="list_"]').each(function(listIndex) {
  // This is called for each list, we renumber them...
  ++listIndex; // So it's 1-based
  this.id = "list_" + listIndex;

  // ...then process the tables within them
  $(this).find('table[id^="table_"]').each(function(tblIndex) {
    // Called for each table in the list, we renumber them...
    ++tblIndex; // 1-based
    this.id = "table_" + listIndex + "_" + tblIndex;

    // ...then process the spans
    $(this).find('span[id^="id_"]').each(function(spanIndex) {
      // Called for each span in the table
      ++spanIndex; // 1-based
      this.id = "id_" + listIndex + "_" + tblIndex + "_" + spanIndex;
    });
  });
});

Live example