选择具有以特定值开头/结尾的id属性的元素

Question

jQuery或JavaScript能否与正则表达式一起使用来选择具有类似ID的多个元素？

我有以下段落：

<p id="item5_2"> A </p>
<p id="item9_5"> B </p>
<p id="item14_2"> C </p>

$('p[id^="item"][id$="2"]').text('new content');

$("#item[\d]*2").html("D");

但它没法工作。我该怎么让它工作？

JSFiddle演示

- Alexandru Severin

---

具有相似的 ID 吗？ID 必须是唯一的。 - Milind Anantwar

@MilindAnantwar 相似 != 相同 - Alexandru Severin

我是唯一一个注意到到目前为止所有答案都检查ID是否以“2”结尾，但实际上有一个以“5”结尾的吗？ - alexia

@nyuszika7h 再读一遍问题 :) (这不是有关兔子的笑话) - marczellm

@marczellm 哦，抱歉，我明白了。我猜这么晚了我不应该在 Stack Overflow 上了。:P - alexia

Answer 1

可以的，你可以结合属性开始于和属性结束于选择器。

$('[id^="item"][id$="2"]').html("D");

FIDDLE (并且您必须在Fiddle中启用jQuery)

然而，您不能使用正则表达式来匹配其中的数字，您需要使用filter()。

$('[id^="item"]').filter(function() {
    return this.id.match(/item\d+_2/);
}).html("D");

- adeneo

---

这是一个好的回答，但我想要指出问题中的症结。基于部分ID匹配进行选择是一种可怕的方法，完全忽略了关注点分离。特别是当你可以使用数组来获得相同的结果时。不要把业务逻辑放在应用程序的表示层中。在编写UI时进行这些类型的选择是初学者常见的错误，最好避免。 - Benjamin Gruenbaum

Answer 2

您可以使用 jQuery 提供的 "start with" 和 "ends with" 选择器，如下所示。

$("[id^='item'][id$='2']").html("D");

官方文档：

• 以此开始的选择器
• 以此结束的选择器

- Bhushan Kawadkar

Answer 3

最佳做法是使用以下jQuery选择器。

^= is starts with
$= is ends with

=  is exactly equal
!= is not equal
*= is contains

所以，在您的情况下：

var $items = $('[id^="item"][id$="2"]');

- martynas

Answer 4

您可以组合属性选择器：示例代码。

$("[id^='item'][id$='2']").html("D");

- Adrift

Answer 5

尝试这个

 <p id="item5_2"> A </p>
 <p id="item9_5"> B </p>
 <p id="item14_2"> C </p>

并且...

 $('[id^="item"][id$="2"]')

- Illaya

Answer 6

这里是可用的JS FIDDLE

HTML：

<p id="item5_2"> A </p>
<p id="item9_5"> B </p>
<p id="item14_2"> C </p>
<input type="button" value="Get element ids starting with 'item' and ending with '2'" onclick="get_ids()">

JS:

get_ids = function(){
    $('[id^="item"][id$="2"]').each(function() {
        alert($(this).attr('id'));
    });
}

- Rahul Gupta

Answer 7

如果您想执行其他操作，可以使用下面的代码：

$('[id^="item"]').each(function(){
  if(this.id.slice(-1) == 2){
    //Do something
    $(this).html('D');
  }

});

- Brotheryura