使用 JQuery 通过迭代 ID 引用 DOM 元素
Reference DOM elements by an iterated ID using JQuery
我想做两件事。第一件事是未知数量元素的点击事件,稍后将添加到 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() 将只是 return 具有该 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() 方法,我是否会在我的选择器中使用 类?
我会使用 class 名称而不是 ID,因为 ID 必须是唯一的并且管理带有后缀的 ID(ID1
、ID2
等,如您在这个问题)是一个痛苦。但是可以做到。
使用 class:
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 () {
// ...
});
它使用 "attribute starts with" 选择器 ^=
来查找具有 id
属性且以 categoryToggle
.
开头的任何元素
确保您的 ID 值真正独一无二!完成后,请查看适用于您的项目的两种多元素选择方法:
1) 使用单个 class 值 + 基于 class 的选择:
$(".myselectorclass").each(function (index) { ...do something... });
2) 为每个可迭代元素使用唯一 ID -- 尝试使用基于属性的选择器而不是 #ID
$("DIV[id^='myIdPrefix']").each(function (index) { ...do something... });
方法 2 解决了您选择 "ID1, ID2, etc" 时的想法。希望这对您有所帮助!
JQuery 选择器信息:
一般 - http://api.jquery.com/category/selectors/
'Starts With' - http://api.jquery.com/attribute-starts-with-selector/
我想做两件事。第一件事是未知数量元素的点击事件,稍后将添加到 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() 将只是 return 具有该 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() 方法,我是否会在我的选择器中使用 类?
我会使用 class 名称而不是 ID,因为 ID 必须是唯一的并且管理带有后缀的 ID(ID1
、ID2
等,如您在这个问题)是一个痛苦。但是可以做到。
使用 class:
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 () {
// ...
});
它使用 "attribute starts with" 选择器 ^=
来查找具有 id
属性且以 categoryToggle
.
确保您的 ID 值真正独一无二!完成后,请查看适用于您的项目的两种多元素选择方法:
1) 使用单个 class 值 + 基于 class 的选择:
$(".myselectorclass").each(function (index) { ...do something... });
2) 为每个可迭代元素使用唯一 ID -- 尝试使用基于属性的选择器而不是 #ID
$("DIV[id^='myIdPrefix']").each(function (index) { ...do something... });
方法 2 解决了您选择 "ID1, ID2, etc" 时的想法。希望这对您有所帮助!
JQuery 选择器信息:
一般 - http://api.jquery.com/category/selectors/
'Starts With' - http://api.jquery.com/attribute-starts-with-selector/