使用 JQuery 通过迭代 ID 引用 DOM 元素答案

【问题标题】：Reference DOM elements by an iterated ID using JQuery使用 JQuery 通过迭代 ID 引用 DOM 元素
【发布时间】：2015-03-08 17:30:15
【问题描述】：

我想做两件事。第一件事是一个未知数量的元素的点击事件，稍后将被添加到 DOM 中，因为它会不断更新。

点击甚至看起来像这样并且当前正在工作。

$("#systemDetails").on("click", "#categoryToggle", function () {
    $(this).closest('table').next().toggle("slow");
    $(this).toggleClass("glyphicon-plus-sign glyphicon-minus-sign");
});

id 是 categoryToggle。

现在我想使用该 ID 引用每个单独的项目，但是当 ID 都相同时，您不能这样做。 .each() 将只返回具有该 ID 的第一个元素。

理想情况下，我希望我的第二段代码的行为如下：在DOM的一部分被AJAX替换之前有一个保存功能，然后在替换之后我想调用这个：

function recallVis() {
    $("#categoryToggle").each(function (index) {
        if (categoryVis[index]) {
            // hide
            $(this).closest('table').next().hide();
        } else {
            // show
            $(this).closest('table').next().show();
        }
    });
}

有没有办法遍历所有同名的 ID，或者遍历 ID 列表，例如，这种格式：ID1、ID2、ID3... 等等...并维护一个单击事件处理程序适用于 ID(number) 格式的所有项目？

如果我想使用 JQuery 的 .each() 方法，我是否会在选择器中使用类？

【问题讨论】：

见the jQuery docs。您可以使用“开头为”选择器来查找所有以某些常见字符集开头的id。但是，每个id必须在页面上是唯一的。
ID不能相同；这就是为什么它被称为“ID”。在多个元素上使用相同的 ID 会导致文档无效。如果要识别元素组（或“类”），请使用类名，而不是 ID。你所拥有的可能会起作用，但下次 jQuery 或浏览器的下一个 dot 版本出来时就不起作用了。
"我是不是被类卡住了" - 为什么你认为使用类名是“卡住”，或者在某些方面低劣？
Sparky，看来你可能有答案了。你应该把它作为一个发布。如果我使用开头，它是否允许我访问它返回的项目的特定索引？我将如何合并它来创建一个以（“someID”）开头的点击事件？
TJ 将我的建议纳入他的回答中，所以我同意。是的，您可以在.each() 中获取索引。同样，请参阅文档：api.jquery.com/jquery.each

标签： javascript jquery ajax dom

【解决方案1】：

我会使用类名而不是 ID，因为 ID 必须是唯一的，并且管理带有后缀（ID1、ID2 等，正如您在问题中提到的）的 ID 很痛苦。但可以做到。

使用类：

function recallVis() {
    // v--- Change is here
    $(".categoryToggle").each(function(index) {
        if (categoryVis[index]) {
            // hide
            $(this).closest('table').next().hide();
        } else {
            // show
            $(this).closest('table').next().show();
        }
    });
}

...而您委托的 click 处理程序将是：

// Change is here ---------------v
$("#systemDetails").on("click", ".categoryToggle", function () {
    // ...
});

使用ID1、ID2等：

function recallVis() {
    $("[id^=categoryToggle]").each(function(index) {
        if (categoryVis[index]) {
            // hide
            $(this).closest('table').next().hide();
        } else {
            // show
            $(this).closest('table').next().show();
        }
    });
}

...您委托的 click 处理程序将是：

// Change is here ---------------vvvvv--------------v
$("#systemDetails").on("click", "[id^=categoryToggle]", function () {
    // ...
});

这使用“属性以”选择器^= 来查找具有以categoryToggle 开头的id 属性的任何元素。

【讨论】：

好奇你是否知道使用类而不是“开始于”选择器的性能差异。
@Sparky：只是添加了一个“starts-with”选项，很有趣。我怀疑在现实世界中是否存在任何重要的性能差异（我敢打赌，在类选择器方面会有什么差异，但这只是直觉，如果我真的需要知道，我会在信任它之前对其进行测试） .但是管理 ID 上的索引通常很麻烦，而且真的没有理由这样做。
其实我只是在你的答案只包含类选择器的时候才问这个问题。所以我倾向于同意这对现实世界没有任何影响。
谢谢！这正是我一直在寻找的。你是对的，我觉得我没有真正的理由需要管理 ID 后缀。

【解决方案2】：

确保您的 ID 值真正独一无二！完成后，看看两种可能适用于您的项目的多元素选择方法：

1) 使用单个类值 + 基于类的选择：

$(".myselectorclass").each(function (index) { ...do something... });

2) 为每个可迭代元素使用唯一 ID -- 尝试使用基于属性的选择器而不是 #ID

$("DIV[id^='myIdPrefix']").each(function (index) { ...do something... });

方法 #2 解决了您选择“ID1、ID2 等”的想法。希望这会有所帮助！

JQuery 选择器信息：
一般 - http://api.jquery.com/category/selectors/
'开始于' - http://api.jquery.com/attribute-starts-with-selector/

【讨论】：