I have few dives that are identical but they have different div IDs. Is there any way to apply a CSS style to all the div IDs using some sort of a selector, that is cross browser compatible? My HTML looks like this
<div id="field_0_dd"></div>
<div id="field_1_dd"></div>
<div id="field_2_dd"></div>
<div id="field_3_dd"></div>
<div id="field_4_dd"></div>
<div id="field_5_dd"></div>
Thanks heaps :)
You can use attribute selectors (^= is the starts with selector and $= is the ends with selector):
$('div[id^="field_"][id$="_dd"]')
Although having this many unique IDs is pretty hard to manage. Give them a class as well.
" in your string other than the extra character space? I mean...in some server side languages it escapes the interpreter. Just curious, figured you'd know
If you're looking for a CSS selector to match a regular expression, then I don't think you can get it in a cross-browser compatible way (though CSS2 Attribute Selectors with Regex allows you to select, e.g. everything beginning with field_. Not supported by IE<=6, but there you go).
However, jQuery has the filter function, which can be used to accomplish this easily:
$('div')
.filter(function() {
return this.id.match(/field_\d+dd/);
})
.html("Matched!")
;
Just give them all the same class!
<div class="common-class" id="field_0_dd"></div>
<div class="common-class" id="field_1_dd"></div>
<div class="common-class" id="field_2_dd"></div>
<div class="common-class" id="field_3_dd"></div>
<div class="common-class" id="field_4_dd"></div>
<div class="common-class" id="field_5_dd"></div>
.common-class{background:green;margin:auto;etc}
Could do
or few other down below.
Hope it fits the cause :)
code
$(document).ready(function() {
$('div').css('color','green');
});
$('div[id^=field_]')
add a class and then select that.
e.g. class = "dummy"
and in the jquery
$('.dummy') ... whatever you want, e.g. $('.dummy').css('color','red')
$('div[id^="field"]').addClass('styleyouwant');
And in your css
.styleyouwant{
/**styles here**/
}
