使用jquery从标记元素重置id

Question

给定以下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>

如果要删除ids为2和4的元素，我如何重置(使用jquery或javascript，如果更容易)所有这些eleement的ids，最终结果为：

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

谢谢你的帮助！

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

Answer 2

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

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

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