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

IT技术 javascript jquery
2021-01-14 08:26:56

我有这个 jQuery 代码:

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

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

我怎样才能为所有这些div制作一个 jQuery 代码,就像上面的那个?

4个回答

使用 jquery属性选择器开始

$('[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 时更新选择器。

避免仅按类选择:$(".myclass"); 将在现代浏览器中快速运行。不幸的是,在 IE6/7 和 Firefox 2 等较旧的浏览器中,jQuery 必须检查页面上的每个元素以确定是否已应用“myclass”。如果我们用一个标签名来限定它,选择器会更有效率,例如: $("div.myclass");
2021-03-18 08:26:56
@Krishna 为了完整起见,如果您想将我的评论添加到您的答案中(列出多个 CSS 选择器): jQuery('#anID1, #anID2, #anID2')
2021-03-19 08:26:56
有谁知道,如果我用 ajax 加载 div 框,我怎么能让这段代码工作?
2021-03-20 08:26:56
$('#editDialog-0, #editDialog-1, #editDialog-2,...,#editDialog-n')也可以写成$('#editDialog-0').add('#editDialog-1').add('#editDialog-2')('#editDialog-n') 注我可能会为任何超出平凡长度的集合寻求除此之外的另一种解决方案。
2021-03-20 08:26:56

考虑到您尚未提及但会发现有用的内容,让我提供更广泛的答案。

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

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

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

方案一

// 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+/)});
作为替代方案$("[attribute^='foo'][attribute$='bar']");- 这意味着查找所有以“bar”结尾的属性,然后在该集合中查找以“foo”开头的属性,这是由于从右到左处理嘶嘶声。也许一个改进可能是$("[attribute^='foo']").filter("[attribute$='bar']");允许您隔离以“foo”开头,然后在带有后缀“bar”的集合中进行选择 - 这可能会更快。结果取决于您的 DOM 和每个的频率。
2021-04-07 08:26:56

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

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

或者,如果对您来说更容易,您可以改用类选择器

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

$(".editDialog")

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

$('.foo').each(function () {
   $(this).dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });
});
无论是或列表中的ID在jQuery选择:jQuery('#myid1, #myid2, #myid3')
2021-03-16 08:26:56
也许是这样,但是如果您必须枚举 id,那么您可能一开始就不需要 id。
2021-03-16 08:26:56
这需要对 HTML 进行更改,这并不是绝对必要的。
2021-03-18 08:26:56
@Mihai Stancu,如果有368个ID怎么办?
2021-03-27 08:26:56
@isherwood 你说的是真的,但这是一种推荐的做事方式——如果它们有共同的功能,他们也应该有共同的类。
2021-04-02 08:26:56