I've to do the following simple CSS selector using jQuery , but I can't :
"#test > *"
I've tried in many ways but I just can't do that!
$("#jqt > *")
or
$('*',$("#jqt")).css()
the last one seemed to work but I realize开发者_开发百科d that it shoudnt!!
How should I do this simple selection to add a very simple CSS property (background-image
and font-family
)????
Thanks in advance
Instead of $("#jqt > *")
try $("#jqt").children()
I guess you are trying to apply css only on the "direct children" of #jqt
.
Here is a trick to avoid your style from being applied to the sub child elements:
HTML:
<div id="jqt">
<a>link</a>
<p>paragraph</p>
<div>div</div>
<div class="no_inherit">
<a>sub link</a>
<p>sub paragraph</p>
<div>sub div</div>
</div>
</div>
CSS:
.mystyle {
background-image: url(img.png);
font-family: "courier";
}
jQuery:
$('#jqt').children().not(".no_inherit").addClass('mystyle');
If you remove not(".no_inherit")
, the CSS is applied to the elements in the elements in #jqt > div
, so all elements are styled.
Fiddle here : http://jsfiddle.net/7AM5Z/1/
This works, if you're wanting to select immediate children:
$("#jqt > *").css({ 'background-image' : 'url(...)', 'font-family' : 'arial'})
jsFiddle
精彩评论