Jquery: find and skip all gaps with a specific ID in 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 the item, the list numbers are no longer in order (1,3,4 ...).

What I'm trying to do is find all the spaces starting with "id_" and get the full identifier so that it can reset the numbers in the correct order.

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

});

As I try to do this, I cannot figure out how to get the span identifier.

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

thank

UPDATED

Ok i took a bit from each message to get this

var i = 1;

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

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

   i++;

});

Thank you all for your help.

Answer 1

. , each. , , id, "table_", ( "list_" "id_" ). , , , , . , ().

, , .

each id DOM this.id.

, , .

---

:

jQuery , span id "id_", :

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

find, , each, . , 1, 0, index, jQuery each. Assigning the IDs can be done with the raw DOM element ( in the ), .

find, :

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

---

. , , :

$('#list div[id^="list_"]').each(function(listIndex) {
  // This is called for each list, we renumber them...
  ++listIndex; // So it 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;
    });
  });
});

Answer 2

- , - :

var myDiv = document.getElementById("targetDivId");
var displayNum = 1;
var nodes = myDiv.getElementsByTagName("span");
for (var index = 0; index < nodes.length; index++) {
    var node = nodes[index];
    if (node.id.indexOf("id_") == 0) {
        node.id = "id_" + displayNum;
        node.innerHTML = displayNum;
        displayNum++;
    }
}

Answer 3

You can use the attribute StartWith selector .

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

Answer 4

you can use

$('[id^="table_"]').each(function(index, table){
  $('span:first', this).attr('id');
});

This basically searches for the FIRST span element inside each table. If there are more gaps, you will have to combine both:

$('[id^="table_"]').each(function(index, table){
  $('span[id^="id_"]:first', this).attr('id');
});

Not 100% sure if the latter works.

Answer 5

If you are trying to change the identifiers of each list of groups, table and range, you need

// for each list
$('[id^="list_"]').each(function(index, table){
  // for the inner table and span and the actual list
  $('table[id^="table_"], span[id^="id_"]', this).add(this).each(function(){
    // split the id to the prefix and number
    var id_parts = this.id.split('_');
    // assign new id based on existing prefix and the new number
    this.id = id_parts[0] + '_' + (index+1);
  })
});

if you want to change the text then use

// for each list
$('[id^="list_"]').each(function(index, table){
  // for the inner table and span and the actual list
  $('table[id^="table_"], span[id^="id_"]', this).add(this).each(function(){
    // split the id to the prefix and number
    var id_parts = this.id.split('_');
    // assign new id based on existing prefix and the new number
    this.id = id_parts[0] + '_' + (index+1);
    // single out the span and change its text
  }).filter('span').text(index+1);
});