jQuery id 选择器以特定文本开头

javascript jquery

2022-08-30 03:02:32

我有这个jQuery代码：

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

但是我有几个带有id的div，如下所示：，，，....，.editDialog-0editDialog-1editDialog-n

如何为所有这些div制作jQuery代码，就像上面的那个？

答案 1

使用 jquery 从属性选择器开始

$('[id^=editDialog]')

替代解决方案 - 1（强烈推荐）

一个更干净的解决方案是为每个 div 添加一个公共类，并使用

$('.commonClass').

但是，如果html标记不在您手中并且由于某种原因无法更改它，则可以使用第一个标记。

替代解决方案 - 2（如果不建议）（根据stancu的建议@Mihai）n is a large number

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

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

答案 2

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

对于您当前的问题，答案是

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

插入符号（^）取自正则表达式和 means 。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在上面的代码中，可以更改为元素可能具有的任何属性，例如、、或。hrefnameidsrc

解决方案 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+/)});