Question

我有一个为每个项目编号的列表（1,2,3,4 ..）。我有一个删除项目的功能，但当它删除一个项目时，列表编号不再按顺序排列（1,3,4 ...）。

我要做的是找到以“id_”开头的所有跨度并获取完整的ID，这样就可以将数字重置为正确的顺序。

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

});

我试图这样做的方法，我无法弄清楚如何获得跨度的ID。

<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循环。它看起来很好，除了你似乎在寻找以“table_”开头的id，但你没有（你有“list_”和“id_”）。而且，你完全没有限制，这可能是相当多的工作。选择器越窄，越好（通常）。

我试图这样做的方法，我无法弄清楚如何获得跨度的ID。

在each循环中，DOM元素的id可用this.id。

我的原始答案解决了如何使用您引用的标记执行此操作。

原始回答：

jQuery有"attribute starts with" selector，因此你可以找到所有span个孩子，id以“id_”开头，然后循环为他们分配新ID：< / p>

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

Live example

进一步更新：如果您真的想玩得开心，可以重新编号列表，列表中的表格以及表格中的跨度：

$('#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

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

您可以使用attributeStartsWith selector。

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

Answer 4

您可以使用

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

基本上，这会在每个表中查找FIRST span元素。如果有更多的跨度，你必须将两者结合起来：

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

不是100％确定最后一个是否有效。

Answer 5

如果您尝试更改每个组列表，表格和范围的ID，则需要

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

jquery：查找并遍历div中具有特定ID的所有跨度？

5 个答案: