使用 jquery 从标签元素中重置 id答案

【问题标题】：Reseting the id from tag elements with jquery使用 jquery 从标签元素中重置 id
【发布时间】：2012-04-30 17:47:49
【问题描述】：

给定以下 html：

<div>
    <div id="element-0"></div>
    <div id="element-1"></div>
    <div id="element-2"></div>
    <input id="element-3"></input>
    <div id="element-4"></div>
    <div id="element-5"></div>
    <div id="element-6"></div>
</div>

如果要删除 id 为 2 和 4 的元素，我如何重置所有这些元素的 id（如果更简单，可以使用 jquery 或 javascript），最终结果为：

 <div>
    <div id="element-0"></div>
    <div id="element-1"></div>
    <input id="element-2"></div>
    <div id="element-3"></div>
    <div id="element-4"></div>
</div>

感谢您的帮助！

【问题讨论】：

这闻起来像是糟糕的设计。您的代码不应期望数字升序。也许如果您能详细说明您的代码将要做什么，我们可以提出更好的替代方案。

标签： jquery html reset

【解决方案1】：

其他答案还可以，但可能不够稳健。例如，@Xander 的回答没有考虑到其中一个元素是 input 而不是 div。 @thecodeparadox 的答案依赖于封闭 div 的每个子元素都具有“元素-”ID。

要彻底做到这一点，您必须遍历 DOM 中的所有元素，查看它们的 ID 是否以“element-”开头，然后相应地更改 ID。

我首先编写了一个函数来获取所有以“element-”开头的元素：

function getElements() {
  return $('html').find('*').filter( function() {
    var id = $(this).attr('id');
    return id && id.indexOf( "element-" ) == 0;
  } );
}

然后是一个重新排序 ID 的函数：

function reorderIds() {
  var idx = 0;
  getElements().each( function() {
    $(this).attr( 'id', 'element-' + idx++ );
  } );
}

你可以在这里看到我的 jsfiddle：http://jsfiddle.net/22CzQ/4/

【讨论】：

【解决方案2】：

function resetIndexes() {
    var els = $('div *'), i;

    for(i = 0; i < els.length; i++){
        els.eq(i).attr('id', 'element-' + i);
    }
}

【讨论】：

【解决方案3】：

<div id="elements">
    <div id="element-0"></div>
    <div id="element-1"></div>
    <div id="element-2"></div>
    <input id="element-3"></div> // your markup has error here remove the </div>
    <div id="element-4"></div>
    <div id="element-5"></div>
    <div id="element-6"></div>
</div>


$('#elements').children().each(function(index, val) {
  $(this).attr('id', 'element-' + index);
});

【讨论】：