jQuery selector for "all not first in a div preceded by a object with class"
Here is a sample of what I have in 开发者_如何转开发HTML:
<span class="a">Test</span>
<div class="b">
<div id="x_ABC">ABC must NOT be hidden</div>
<div id="x_DEF">DEF must be hidden</div>
<div id="x_GHI">GHI must be hidden</div>
<div id="JKL">JKL must NOT be hidden</div>
</div>
All I want is to hide with jQuery all the divs with an id starting with "x" inside the div with class "b" preceded by a html tag with a class "a".
I tried this code :
$('.a + div.b div[id^=x]:gt(0)').hide()
But it doesn't do what I want. Does anyone know how to fix the selector using only the class "a", "b" and "id^=x"?
Thank you!
Quotes in attribute selectors are mandatory:
$('.a + div.b div[id^="x"]:gt(0)').hide()
DEMO
For performance reasons, you might want to use .slice()
:
$('.a + div.b div[id^="x"]').slice(1).hide()
You need quotes around the x
: http://api.jquery.com/attribute-starts-with-selector/
Just a more functional alternative:
$('div.b').each(function(_, b) {
var $b = $(b);
if( $b.prev().hasClass('a') ) {
$b.children().slice(1).filter(function() { return this.id.charAt(0) === 'x' }).hide();
}
});
I think it's as simple as this
$('.a + .b > *[id^="x"]:nth-child(n+2)').hide();
精彩评论