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（background-color：red）。 * =数字

LIVE： http://jsfiddle.net/HB3xf/2/

Answer 1

正如HTML所示，您可以使用attribute starts with和attribute ends with选择器的组合：

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

但是，如果HTML在您的控制之下，您应该考虑向这些元素添加class，或者向其父级添加id或class，这样你就可以更直接的方式选择它们。

<强> See it in action

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');

jQuery for ID中的正则表达式

5 个答案: