使用jquery選擇特定的後代

Question

JQuery's Documentation"parent > child""parent > child"選擇器選擇由「parent」指定的元素的「child」指定的所有直接子元素。 「直接的孩子」只是一個層面的要素。例如，我有這樣的代碼：

... 
    <table class="advanceSearch"> 
     <tr> 
     <td> 
      <ul class="form"> 
      <li> 
       <label>Document Type:</label> 
       <input type="text" id="cmbDocumentType" name="paramtitle" /> 
      </li> 
      <li> 
       <label>Title:</label> 
       <input type="text" id="paramtitle" name="paramtitle" /> 
      </li> 
      <li> 
       <label>Notes:</label> 
       <input type="text" id="paramNotes" name="paramNotes" /> 
      </li> 
      <li> 
       <label>Revision Number:</label> 
       <input type="text" id="paramRevisionNumber" name="paramRevisionNumber" /> 
      </li> 
      <li> 
       <label>Draft Number:</label> 
       <input type="text" id="paramDraftNumber" name="paramDraftNumber" /> 
      </li> 
      <li> 
       <label>Version Number:</label> 
       <input type="text" id="paramVersionNumber" name="paramVersionNumber" /> 
      ... 

我要選擇input元素與開始「參數」的ID，所以我用了find()代替parent > child選擇的：

 $("table.advanceSearch").find("ul.form").find('input[id^="param"]').attr("disabled", "disabled"); 

這效果很好，但我發現它有兩個find()選擇器冗餘。有什麼辦法可以簡化這個嗎？

Answer 1

根本不需要.find();你可以使用兩個後代選擇器。

$('table.advanceSearch ul.form input[id^="param"]') 

記住：x > y（子選擇）是更多或更少與$('x').children('y')可互換的，並且是$('x y')更多或更少與$('x').find('y')互換。

Answer 2

試試這個：

$('table.advanceSearch ul.form input[id^="param"]').prop('disabled', true); 

OR

$('table.advanceSearch ul.form').find('input[id^="param"]').prop('disabled', true); 

OR

$('table.advanceSearch ul.form li').children('input[id^="param"]').prop('disabled', true); 

Answer 3

您的選擇可以更長：

$(".advanceSearch input[id^='param']").prop("disabled", true); 

這樣做也是一樣，沒有冗長。