2012-05-08 5 views
0

JQuery's Documentation에서 "parent > child" 선택자는 "parent"로 지정된 요소의 "child"로 지정된 모든 직접 하위 요소를 선택합니다. "직접 아동"은 한 단계 아래의 요소에 불과합니다. 예를 들어,이 코드가 있습니다Jquery를 사용하여 특정 외피 선택

... 
    <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" /> 
      ... 

내가 "PARAM"로 시작하는 식별자와 input 요소를 선택합니다, 그리고 그래서 parent > child 선택 대신 find()을 사용 :

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

이를 잘 작동하지만 두 find() 셀렉터를 사용하는 것이 중복됨을 발견했습니다. 이것에 대한 속기를 가질 방법이 있습니까?

답변

4

실제로는 .find()이 전혀 필요하지 않습니다. 대신에 두 개의 자손 선택자를 사용할 수 있습니다.

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

기억 x > y (아이 선택기) $('x').children('y') 더 또는 덜 교환하고, $('x y')$('x').find('y') 더 또는 덜 교환 할 수있다.

+0

[this] (http://api.jquery.com/descendant-selector/)를 읽은 후에'$ ('table.advanceSearch input [id^= "param"]');'를 사용했지만 대답은 또한 올바른! 어쨌든 고마워. :)) – ideAvi

1

이 시도 :

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

또는

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

또는

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

+1 정답,하지만 미스터 매트 그것을 먼저 가지고 있지만 너무 감사합니다 :) – ideAvi

1

당신의 선택이 더 이상 될 수 있습니다

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

이렇게하면 자세한 표시없이 동일하게 처리됩니다.

+0

이것은 내가 한 짓입니다 :) – ideAvi

관련 문제