DOM樹遍歷與jQuery選擇

Question

我需要一個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> 

目標FooClass和BarClass應該像

$("#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 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'); 

或者乾脆

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