JQuery: Найти и перебрать все пролеты с определенным идентификатором в DIV?

Question

У меня есть список, который нумеруется для каждого элемента (1,2,3,4 ..).У меня есть функция, которая удаляет элементы, но когда она удаляет элемент, список номеров уже не в порядке (1,3,4 ...).

Я пытаюсь найти все диапазоны, начинающиеся с"id_" и получите полный идентификатор, чтобы можно было сбросить числа в правильном порядке.

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

});

Способ, которым я пытаюсь это сделать, не могу понять, как получить идентификатор диапазона.

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

Спасибо

ОБНОВЛЕНО

Хорошо, я взял бит из каждого поста, чтобы получить это

var i = 1;

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

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

   i++;

});

Спасибовсе для вас, помогите.

Answer 1

Обновление Я пропустил, что у вас уже есть цикл each.Это выглядит хорошо, за исключением того, что вы, похоже, ищете id s, начинающиеся с "table_", но у вас их нет (у вас есть "list_" и "id_").Кроме того, вы делаете это совершенно безгранично, что, вероятно, будет довольно много работы.Чем более узким может быть селектор, тем лучше (обычно).

Как я пытаюсь это сделать, я не могу понять, как получить идентификатор диапазона.

В цикле each элемент id элемента DOM доступен как this.id.

В моем исходном ответе указано, как это сделать с цитируемой вами разметкой.

---

Оригинальный ответ :

jQuery имеет атрибут "начинается с" селектора , поэтому вы можете найти все дочерние элементы, которые span s с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 ( this in the each` callback), поскольку в этом нет ничего сложного.

Хотя на самом деле вам не нужен отдельный вызов для 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'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;
    });
  });
});

Живой пример

Answer 2

Если вы пытаетесь изменить идентификаторы каждой группы списка, таблицы и диапазона , тогда вам нужно будет

// 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);
  })
});

если вы также хотите изменить текст, используйте

// 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);
});

Answer 3

Вы можете использовать

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

По сути, это ищет ПЕРВЫЙ элемент span внутри каждой таблицы. Если будет больше промежутков, вам придется объединить оба:

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

Не уверен на 100%, работает ли последний.

Answer 4

Вы можете использовать селектор attributeStartsWith .

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

Answer 5

Если приемлемо решение, не зависящее от фреймворка, то что-то вроде следующего должно помочь:

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++;
    }
}