使用jQuery選擇器進行DOM樹遍歷

Question

我需要一個jQuery選擇目標FooClass和BarClass通過#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 Selectors以及hide函數的一些內容 。

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