jQuery：重命名重复的ID答案

【问题标题】：jQuery: rename duplicate idjQuery：重命名重复的ID
【发布时间】：2011-03-31 20:57:35
【问题描述】：

我想在一页中插入多个滑块。我有一段代码我想重用，但它会插入 2 个带有 id=slider 的 DIV...

是否可以使用id=slider 找到第二个元素并重命名为id=slider01？

BR。安德斯

【问题讨论】：

a block of code 是指 HTML 还是 Javascript？

标签： jquery

【解决方案1】：

试试

$('div[id="slider"]:eq(1)').attr("id", "slider01");

http://jsfiddle.net/rYyA7/ - 在 IE6/8、Firefox、Safari、Chrome 和 Opera 中测试。

【讨论】：

也打算这么建议。 +1
那会假设他已经在 DOM 中插入了一个具有相同 id 的元素，这将是非常糟糕的业力。
你测试过吗？我想知道 jQuery/Sizzle 是否没有优化属性选择器以支持getElementById（在某些实现中可能更快）。如果不这样做，我会犹豫不决......
@T.J.：刚刚在处理中。我用与此无关的代码修复了一个 facepalm。我假设 Sizzle 会优化“#id”字符串，但不会优化属性等于选择器（这很有意义，真的）。目前在 Chrome 和 IE 中测试，jsfiddle.net/rYyA7.
致那些想知道的人。它是一个返回 id="slider" 的模块。我想使用该模块两次，但是我需要更改 ID。

【解决方案2】：

您最好在将第二个滑块附加到页面之前，分配一个新的id。您还没有展示如何执行此操作的代码，因此很难就如何执行此操作提供建议，但最好这样做。

当您的文档暂时无效时，之后可以找到第二个滑块，但这可能会很尴尬。同样，这取决于您的代码。如果您已经引用了包含第二个滑块的 jQuery 对象，作为创建它的副产品，这很容易（只需使用 yourvar[1].id = newavlue）。如果没有，您最好根据滑块的共同点其他进行搜索，例如说它们是否都是 divs 和 slider 类：

var sliders, ids;
sliders = $("div.slider");
if (sliders.length > 1) {
    ids = {};
    sliders.each(function() {
        if (ids["x" + this.id]) {
            // This ID has already been used, grab a new one
            this.id = 'newslider' + new Date().getTime();
        }
        else {
            // This ID hasn't been used yet; flag that we're using it
            ids["x" + this.id] = true;
        }
    });
}

该代码遍历所有匹配元素并确保没有重复的 ID（有几个警告，主要是“newsliderNNNNNNNNNN”形式的 ID，其中 N 是 @ 返回的数字987654327@)。（ids 对象中属性名称上的“x”前缀只是为了防止与预先存在的属性发生意外冲突，例如toString。嘿，这是一个有效的id，有人可能 em> 使用它。:-) )

Andy E's head's answer 提供了一种更短的方法，可能是一种可行的方法，但它假设基于id 属性的搜索在某个阶段不会得到优化，因此它会停止查找多个元素。这个假设很可能是有效的，但是如果依赖于选择器实现而不是改变下线并在我的代码中引入问题，我会感到不舒服。（过去几年在选择器方面做了很多工作；例如，当前的 jQuery 引擎 Sizzle 是全新的。）但同样，它可能没问题。

【讨论】：

大声笑，我的回答突然变得相当有争议:-) 你说得很有道理，尽管我认为属性等于选择器的工作方式与它们完全一样是有道理的，我会把钱放在事实上，由于诸如此类的原因，它们没有被优化。许多其他选择器都进行了优化，这会让您想知道为什么它们遗漏了属性等于选择器。
另一个论点是，在许多情况下，Sizzle 依赖于浏览器的 querySelectorAll 实现（如果可用）。未来也可能如此。顺便说一句 - +1 一个好的答案:-)
@Andy E 的负责人：是的，这样做可能很好，而且非常直接，而且很短（短~= 需要维护的代码少~= 好）。我只是被这样的事情咬了足够多的时间，所以我非常谨慎。

【解决方案3】：

我会这样做：

$('div[id="slider"]').not(':eq(0)').each(function(i){ //selects all divs with the id slider but not the first one
    var $that = $(this),
    newID = $that.attr('id') + (i + 1) // adds a incising number to the ID's 

    $that.attr('id', newID) // sets the new id
})

在此处查看示例： http://jsfiddle.net/nuW34/

【讨论】：

+1 是我的灵感，哦，你愿意嫁给我吗：-P