jquery - 使用 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 选择器和可能的隐藏函数。

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