0

ドロップダウン メニューを描画するための簡単なマークアップと、さまざまな複雑さのいくつかの div があります。

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

ユーザーがドロップダウンからオプションを選択すると、一致しない DIV を非表示にし、一致する DIV のみを表示します。

$('.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 のみを表示しています。また、すべて表示オプションがまったく機能していません。したがって、深さにはいくつかの問題があります。どうすればこれを修正できますか?

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

4

2 に答える 2

1

デモ

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

一連の DOM 要素を表す jQuery オブジェクトを指定すると、この.find()メソッドを使用して、DOM ツリー内のこれらの要素の子孫を検索し、一致する要素から新しい jQuery オブジェクトを構築できます。.find()メソッドと.children()メソッドは似ていますが、後者は DOM ツリーを 1 レベル下に移動するだけです。

だから.children()ここを使ったほうがいい

デモ

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();
    }
});
于 2013-08-30T02:17:56.447 に答える