Id 的 jQuery 选择器以特定的文本开始

我有这个 jQuery 代码:

$( "#editDialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});

但是我有几个像这样的 Div: editDialog-0，editDialog-1，... ... ，editDialog-n。

如何为所有这些 divs编写 jQuery 代码，如上所示？

265958 次浏览
小开
最佳答案

使用 jquery < em > < a href = “ https://api.jquery.com/tribute-start-with-selector/”> 以 开头属性选择器

$('[id^=editDialog]')

替代解决方案 -1(强烈推荐)

一个更简洁的解决方案是向每个 div & use 添加一个公共类

$('.commonClass').

但是，如果 html 标记不在你的手中，并且由于某些原因不能更改它，那么你可以使用第一个。

替代解决方案-2 (如果 n is a large number不推荐) (按照@Mihai Stancu 的建议)

$('#editDialog-0, #editDialog-1, #editDialog-2,...,#editDialog-n')

注意: 如果有2个或3个选择器，如果列表没有改变，这可能是一个可行的解决方案，但它是不可扩展的，因为我们必须更新选择器时，有一个新的 ID 在城镇。

小开

向所有 div 添加一个公共类。

$('.foo').each(function () {
$(this).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
});
小开

如果所有的 div 都按照您的说明以 edit Dialog 开始，那么您可以使用以下选择器:

$("div[id^='editDialog']")

或者您可以使用类选择器来代替，如果这对您来说更容易的话

<div id="editDialog-0" class="editDialog">...</div>


$(".editDialog")
小开

让我提供一个更广泛的答案，考虑到你还没有提到的东西，但会发现有用的。

对于你目前的问题，答案是

$("div[id^='editDialog']");

插入符号(^)取自正则表达式，表示 starts with。

解决方案1

// Select elems where 'attribute' ends with 'Dialog'
$("[attribute$='Dialog']");


// Selects all divs where attribute is NOT equal to value
$("div[attribute!='value']");


// Select all elements that have an attribute whose value is like
$("[attribute*='value']");


// Select all elements that have an attribute whose value has the word foobar
$("[attribute~='foobar']");


// Select all elements that have an attribute whose value starts with 'foo' and ends
//  with 'bar'
$("[attribute^='foo'][attribute$='bar']");

上面代码中的 attribute可以更改为元素可能具有的任何属性，如 href、 name、 id或 src。

解决方案2

使用类

// Matches all items that have the class 'classname'
$(".className");


// Matches all divs that have the class 'classname'
$("div.className");

解决方案3

列出它们(在以前的答案中也有提到)

$("#id1,#id2,#id3");

解决方案4

因为当你改进时，正则表达式(从来没有实际使用过这些，解决方案一一直是足够的，但你永远不知道！

// Matches all elements whose id takes the form editDialog-{one_or_more_integers}
$('div').filter(function () {this.id.match(/editDialog\-\d+/)});

提交答案