Селектор jQuery для «все не первое в div с предшествующим объектом с классом»

Question

Вот пример того, что у меня есть в 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>

Все, что я хочу, это скрыть с помощью jQuery все div с идентификатором, начинающимся с "x" внутри div с классом "b"ему предшествует html-тег с классом «a».

Я попробовал этот код:

$('.a + div.b div[id^=x]:gt(0)').hide()

Но он не делает то, что я хочу.Кто-нибудь знает, как исправить селектор, используя только классы "a", "b" и "id ^ = x"?

Спасибо!

Answer 1

Кавычки в селекторах атрибутов обязательны:

$('.a + div.b div[id^="x"]:gt(0)').hide()

DEMO

Из соображений производительности вы можете использовать .slice():

$('.a + div.b div[id^="x"]').slice(1).hide()

Answer 2

Я думаю, что это так же просто, как это

$('.a + .b > *[id^="x"]:nth-child(n+2)').hide();

Answer 3

Просто более функциональная альтернатива:

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

Answer 4

Вам нужны кавычки вокруг x: http://api.jquery.com/attribute-starts-with-selector/