Question

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!

Answer 1

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