JQuery: скрыть мульти-глубину всех DIVs, а затем показать один

Question

У меня есть простая разметка, чтобы нарисовать выпадающее меню и несколько дивов различной сложности:

<select class='sel'> 
    <option data-opt='a'>show only 'a' boxes</option> 
    <option data-opt='b'>show only 'b' boxes</option> 
    <option data-opt='*'>show all</option> 
</select> 

<div class='holder'> 
    <div class='a'> 
     <div> 
      <p>Here is some text (A)</p> 
     </div> 
     <p>Plus more stuff in here.</p> 
    </div> 
    <div class='a'> 
     <p>More text (A)</p> 
    </div> 
    <div class='b'> 
     <p>Here is other text (B)</p> 
     <div><span>There is more in here!</span></div> 
    </div> 
    <div class='b'> 
     <p>Even more text (B)</p> 
    </div> 
</div> 

И когда пользователь выбирает опцию из раскрывающийся, я хочу, чтобы скрыть DIVs, которые не совпадают, и только показать DIVs, которые соответствуют:

$('.sel').change(function() { 
    opt = $(this).find(":selected").data('opt'); 
    console.log('option chosen: '+opt); 

    if(opt == '*') { // select all 
     console.log('show all'); 
     $('.holder').show(); 

    } else { // hide all but this 
     $('.holder :not(div'+opt+')').hide(); 
     $('.holder').find('div'+opt).show(); 

    } 
}); 

Однако, по какой-то причине он не работает. Похоже, что метод hide() скрывает каждый элемент (включая дочерние/родственные братья из главных DIV), а затем метод show() показывает только начальный DIV. И опция show-all вообще не работает. Таким образом, есть некоторые проблемы с глубиной. Как я могу это исправить?

JSFiddle: http://jsfiddle.net/pnoeric/FjEBY/3/

Answer 1

http://jsfiddle.net/FjEBY/6/ является ответом.

Ваши селекторы были немного выключены, и вы забыли . перед opt бит.

$('.sel').change(function() { 

    var opt = $(this).find(":selected").data('opt'), 
     all = $('.holder').children('div').show(); 

    if (opt !== '*') { 
     all.not('.' + opt).hide(); 
    } 

}); 

Answer 2

DEMO

$('.sel').change(function() { 
    opt = $(this).find(":selected").data('opt'); 
    console.log('option chosen: ' + opt); 
    if (opt == '*') { // select all 
     $('.holder').children('div').show() 
    } else { // hide all but this 
     $('.holder').children('div').show().not('.' + opt).hide(); 
    } 
}); 

Учитывая объект JQuery, который представляет собой набор элементов DOM, метод .find() позволяет искать через потомков этих элементов в дереве DOM и создать новый объект JQuery от соответствующих элементов. Методы .find() и .children() аналогичны, за исключением того, что последний перемещается только на один уровень вниз по дереву DOM.

Так что лучше, если вы используете .children() здесь

DEMO

var holder = $('.holder').children('div'); 
$('.sel').change(function() { 
    opt = $(this).find(":selected").data('opt'); 
    console.log('option chosen: ' + opt); 
    if (opt == '*') { // select all 
     holder.show() 
    } else { // hide all but this 
     holder.show().not('.' + opt).hide(); 
    } 
});