id的jQuery选择器以特定文本开头[重复]

Question

我有这个 jQuery 代码：

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

但我有几个 div 的 id 是这样的：editDialog-0, editDialog-1, ...., editDialog-n。

我怎样才能为所有这些 divs 制作一个 jQuery 代码，就像上面的一样？

Answer 1

使用 jquery starts with 属性选择器

$('[id^=editDialog]')

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

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

$('.commonClass')。

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

替代方案 - 2（不推荐n is a large number） （根据@Mihai Stancu 的建议）

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

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

Answer 2

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

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

$("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+/)});

Answer 3

如果您的所有 div 都以您所说的 editDialog 开头，那么您可以使用以下选择器：

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

或者你可以使用类选择器来代替，如果它更容易的话

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

$(".editDialog")

Answer 4

为所有的 div 添加一个公共类。例如将 foo 添加到所有 div。

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