jQuery 中 ID 的正则表达式

Question

<span id="aaa_1_bbb">aaa</span>
<span id="aaa_2_bbb">aaa</span>
<span id="aaa_3_bbb">aaa</span>
<span id="aaa_4_bbb">aaa</span>
<span id="aaa_5_bbb">aaa</span>
<span id="aaa_6_bbb">aaa</span>
<span id="bbb_1_bbb">aaa</span>
<span id="ccc_1_bbb">aaa</span>
<span id="ddd_1_bbb">aaa</span>
<span id="aaa_1_xxx">aaa</span>

$('span[id="aaa_*_bbb"]').css('background-color', 'red');

我必须如何修改这个 jQuery？我想仅为 aaa_*_bbb ID 添加 css (背景颜色:红色)。 * = 数字

实时： http://jsfiddle.net/HB3xf/2/

Answer 1

按照 HTML 的形式，您可以使用 属性开头 和属性以选择器结尾：

$('span[id^="aaa_"]').filter('[id$="_bbb"]').css('background-color', 'red');

但是，如果HTML 由您掌控应考虑向这些元素添加 class ，或向其父元素添加 id 或 class ，以便您可以以更直接的方式选择它们。

查看实际操作。

Answer 2

您可以使用 .filter

$('span').filter(function () { return /aaa_\d+_bbb/.test(this.id); }).css('background-color', 'red');

Answer 3

你可以这样做：

$('span').each(function() {

    var span_id = $(this).attr('id');
    if (span_id.substring(0, 3) == "aaa" && span_id.substring(span_id.length - 3, span_id.length) == "bbb") {
        $(this).css('background-color', 'red');
    }

});

它获取每个 span 元素并检查前 3 个字符是否为“aaa”，后 3 个字符是否为“bbb”，如果是这种情况则分配 CSS。

Answer 4

我认为你需要使用这个： http://james.padolsey.com/ javascript/regex-selector-for-jquery/

Answer 5

更好的选择是在这些元素上设置特定的类，例如

<span id="aaa_1_bbb" class="aaabbb">aaa</span>
<span id="aaa_2_bbb" class="aaabbb">aaa</span>
<span id="aaa_3_bbb" class="aaabbb">aaa</span>
<span id="aaa_4_bbb" class="aaabbb">aaa</span>
<span id="aaa_5_bbb" class="aaabbb">aaa</span>
<span id="aaa_6_bbb" class="aaabbb">aaa</span>
<span id="bbb_1_bbb">aaa</span>
<span id="ccc_1_bbb">aaa</span>
<span id="ddd_1_bbb">aaa</span>

然后，您可以执行 $('span.aaabbb').css('background-color', 'red');