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

时间:2015-03-08 17:30:16

标签: javascript jquery ajax dom

我想做两件事。第一件事是点击事件,以便稍后将未知数量的元素添加到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(数字)的所有项目?

或者如果我想使用JQuery的.each()方法,我是不是在我的选择器中使用类?

2 个答案:

答案 0 :(得分:1)

我使用的是类名而不是ID,因为ID必须是唯一的,并且管理带有后缀(ID1ID2等的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 () {
    // ...
});

使用ID1ID2等:

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

使用"属性以"开头。选择器^=以查找id属性以categoryToggle开头的任何元素。

答案 1 :(得分:0)

确保您的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/