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

Posted 2023-02-22

【中文标题】选择具有以特定值开始/结束的 id 属性的元素

【英文标题】：Select elements with id attribute that starts/ends with a particular value

【发布时间】：2014-07-27 17:23:42

【问题描述】：

jQuery 或 javascript 是否可以与正则表达式一起使用以选择具有相似 id 的多个元素？

我有以下段落：

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

我想更改 id 以item 开头并以2 结尾的段落的内容。

我使用了以下 jQuery：

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

但它不起作用。我怎样才能让它工作？

JSFiddle Demo

【问题讨论】：

ID 相似？？ id 应该是唯一的。

@MilindAnantwar 类似！= 相同

我是唯一一个注意到到目前为止所有答案都检查ID是否以2结尾的人，但有一个以5结尾的人吗？

@nyuszika7h 再次阅读问题:) (nem jut eszembe idevágó nyuszikás vicc)

@marczellm 哦，对不起，我明白了。我想我不应该这么晚了。 :P

【参考方案1】：

可以，您可以组合attribute starts with 和attribute ends with 选择器

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

FIDDLE（你必须在小提琴中启用 jQuery）

你不能使用正则表达式来匹配中间的数字，因为你需要filter()

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

【讨论】：

这是一个很好的问题答案，但我想谈谈房间里的大象。 根据部分 id 匹配进行选择是一种完全无视Separation of Concerns 的可怕方法。特别是当您可以使用数组来获得相同的结果时。不要将业务逻辑放在应用程序的表示层中。在开始编写 UI 编码的第一步的开发人员中，进行此类选择是一个常见错误，最好避免。

【参考方案2】：

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

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

官方文档：

Start with selector Ends with selector

【参考方案3】：

最好的方法是使用 the following jQuery selectors

^= is starts with
$= is ends with

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

所以在你的情况下：

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

【参考方案4】：

您可以组合属性选择器：fiddle

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

【参考方案5】：

试试这个

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

还有……

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

【参考方案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'));
    );

【参考方案7】：

如果您想执行任何其他操作，可以使用下一个代码：

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

);