使用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); 

这样做也是一样，没有冗长。