使用jQuery选择器进行DOM树遍历

Question

I need a jQuery selector to target FooClass and BarClass via #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>   

Should be something like

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

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

Answer 1

Just separate the accessors with a space to also access its non-direct children and pass none as a string to the css function.

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

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

You could also do this and that , but maybe you should just do some reading of the jQuery Selectors and probably the hide function .

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

OR

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

OR Simply

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