jquery - jQuery セレクターを使用した DOM ツリーのトラバーサル

Question

FooClassターゲットとBarClass経由 するjQueryセレクターが必要です#MainSelector

<div id='MainSelector1'>
    <fieldset>
        <legend>Toto</legend>
            <div class='section'>
                <label>Koko</label>
            <div>
                <input type='text' id='KokoId'>
            </div>
            </div>   
            <div class='section'>
                <label>Foo</label>
                <div>
                    <select class='FooClass' /> 
                </div>
            </div>
            <div class='section'>
                <label>Bar</label>
                <div>
                    <select class='BarClass' />
                </div>
            </div>
    </fieldset>
</div>   

<div id='MainSelector2'>
    <fieldset>
        <legend>Toto</legend>
            <div class='section'>
                <label>Koko</label>
            <div>
                <input type='text' id='KokoId'>
            </div>
            </div>   
            <div class='section'>
                <label>Foo</label>
                <div>
                    <select class='FooClass' /> 
                </div>
            </div>
            <div class='section'>
                <label>Bar</label>
                <div>
                    <select class='BarClass' />
                </div>
            </div>
    </fieldset>
</div>   

次のようなものでなければなりません

$("#MainSelector1.FooClass").Css('display', none);
$("#MainSelector1.BarClass").Css('display', none);

$("#MainSelector2.FooClass").Css('display', none);
$("#MainSelector2.BarClass").Css('display', none);

Answer 1

アクセサーをスペースで区切るだけで、その非直接の子にもアクセスしnone、文字列としてcss関数に渡します。

$("#MainSelector1 .FooClass").css('display', 'none');
$("#MainSelector1 .BarClass").css('display', 'none');

$("#MainSelector2 .FooClass").css('display', 'none');
$("#MainSelector2 .BarClass").css('display', 'none');

あれやこれやを行うこともできますが、 jQuery セレクターとおそらく非表示機能の読み取りを行う必要があるかもしれません。

Answer 2

var $el = $('#MainSelector1');
$el.find( '.FooClass' ).css('display', 'none');
$el.find( '.BarClass' ).css('display', 'none');

$el = $('#MainSelector2');
$el.find( '.FooClass' ).css('display', 'none');
$el.find( '.BarClass' ).css('display', 'none');

また

$('#MainSelector1').find( '.FooClass, .BarClass' ).css('display', 'none');
$('#MainSelector2').find( '.FooClass, .BarClass' ).css('display', 'none');

または単に

$('#MainSelector1').find( '.FooClass, .BarClass' ).hide();
$('#MainSelector2').find( '.FooClass, .BarClass' ).hide();