在 jQuery 选择器上使用正则表达式查找基于 id 的所有元素答案

【问题标题】：Find all elements based on ids using regex on jQuery selector在 jQuery 选择器上使用正则表达式查找基于 id 的所有元素
【发布时间】：2011-03-06 10:03:53
【问题描述】：

我有几个具有唯一 ID 的元素，如下所示：

<div id='item-1-top'></div>
<div id='item-2-top'></div>
<div id='item-3-top'></div>

我希望以下内容可以使用 jQuery：

$("#item-[.]+-top").each(function() {
  $(this).hide();
});

我没有很好地掌握正则表达式，我希望能提供一些输入，因为上面的内容似乎不正确。

【问题讨论】：

标签： jquery regex jquery-selectors

【解决方案1】：

如果您使用正则表达式执行此操作，则表达式将是：

item-\d-top

\d 表示任何单个数字 (0..9)，其他字符没有特殊含义（因此被视为文字）。

然而，jQuery 目前没有正则表达式过滤器（只有 start/end/contains/etc 之类的东西） - 所以你必须创建自己的过滤器（这是可能的，但如果你正在考虑你应该停止并考虑您要过滤的内容/原因，并首先确定是否有更好的方法）。

更简单的是创建一个类（如serg555 建议的那样），因为这正是您处理这些项目的方式。

或者（如果您无法更改标记以添加类）然后使用现有的过滤器，扩展 g.d.d.c's answer，我可能会这样做：

$('div[id^=item-][id$=-top]').hide()

（由于现在或将来您可能有多个仅以“top”结尾的项目，因此您需要更加具体，以避免无意中隐藏其他内容。）

【讨论】：

谢谢彼得/serg555。我尝试了上述方法，例如它奏效了。这更像是一个好奇的例子，但正如 serg555 所建议的那样，使用一个类会简单得多。再次感谢！

【解决方案2】：

如果 id 类似于 news-top-1、news-top-2、news-top-3、news-top-4 等，那么选择器会为您提供帮助。

http://api.jquery.com/attribute-starts-with-selector/

$.each( $("input[name^='news-top-']"), function () {
  alert( $(this).hide() );
});

【讨论】：

【解决方案3】：

我会为他们分配一些类，例如item，然后按此类$(".item") 进行搜索。

【讨论】：

【解决方案4】：

James Padolsey 创建了一个很棒的filter，它允许使用正则表达式进行选择。

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

现在你可以使用了

$('div:regex(id,item-[0-9]-top)').hide()

【讨论】：

从 JQuery 3.0 开始，此方法不再有效。 expr[':'] 已弃用。
请更新这个问题。链接是死亡，还要考虑解码器的评论

【解决方案5】：

遇到了类似的问题并喜欢/赞成 serg 的创建类的答案，但是因为我对这些元素进行了多次操作，Keyed Collections 更合适。

【讨论】：

【解决方案6】：

[id^='startidText'] 将匹配 id 其中文本开始 id。

[id$='endIdText'] 将匹配 id 以哪个文本结束 id。

[id*='matchIdtext'] 将匹配字符串中任何位置的 id。

看看下面的帖子也有帮助，我学到了一点诡计querySelector, wildcard element match?

【讨论】：