javascript - regular expression in jQuery for ID - Stack Overflow

admin管理员组

文章数量:1418717

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

how must i modify this jQuery? i would like that add css (background-color:red) only for aaa_*_bbb ID. * = numbers

LIVE: /

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

how must i modify this jQuery? i would like that add css (background-color:red) only for aaa_*_bbb ID. * = numbers

LIVE: http://jsfiddle/HB3xf/2/

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 25, 2011 at 11:41 Paul Attuck asked Oct 25, 2011 at 11:35 Paul AttuckPaul Attuck 2,27944 gold badges2323 silver badges2626 bronze badges 3

• I've read your question four times, and I still don't know what you're asking. – Colin Fine Commented Oct 25, 2011 at 11:38
• 1 @ColinFine: aaa_22222_bbb should be red – genesis Commented Oct 25, 2011 at 11:38
• @Colin He wants a CSS selector that matches HTML ID by regular expression. – Rup Commented Oct 25, 2011 at 11:38

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

As the HTML stands, you can use a bination of the attribute starts with and attribute ends with selectors:

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

However, if the HTML is under your control you should consider adding a class to these elements, or an id or class to their parent, so that you can select them in a more straightforward manner.

See it in action.

You could use .filter

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

You could do something like:

$('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');
    }

});

It takes every span element and checks whether or not the first 3 characters are "aaa" and the last 3 are "bbb" and assigns the CSS if this is the case.

I think you need to use this: http://james.padolsey./javascript/regex-selector-for-jquery/

The better option would be to set a specific class on those elements, like

<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>

Then, you can just do $('span.aaabbb').css('background-color', 'red');

本文标签： javascriptregular expression in jQuery for IDStack Overflow