2012-09-28 4 views
1
<div class='main'> 

<div> 
     <div> 
      <button></button> 
     </div> 
</div> 
<ul>  
     <li> 
      <img /> 
     </li> 

     <li> 
      <h1></h1> 
     </li> 

</ul> 
<div> 
     <span> 
      <a href=""></a> 
     </span> 
</div> 

</div> 

질문 : img, h1 및 a 버튼을 선택하고 싶습니다. jQuery에서이 작업을 수행하는 유일한 방법은 $ (. main) .children(). children(). children()입니다. 그러나 jQuery에서 이러한 요소를 선택하는 또 다른 방법이 있습니까? (너무 여러 번 아이를()를 사용하지에)jQuery children() 더 깊은 곳으로

+2

'$ (". main") find ("button, img, h1, a")'는''.main ''아래의 모든 레벨에서 모든 요소를 ​​선택합니다. 어떤 레벨 또는 정확히 3 레벨 아래로? – nnnnnn

+2

'$ ("img, h1, a, button", ".main")' –

+0

@ nnnnnn은 더 간단합니다. 이미지 -'$ ('li img'). 각각 (function (o) {....})'. 'h1' -'$ ('li h1'). 각각 (function (o) {....})'. 앵커에 대해서 -'$ ('span'). each (function (o) {....})'. –

답변

0
<div class="main"> 
    <div> 
     <div> 
     <button class="mustSelect"></button> 
     </div> 
    </div> 
    <ul> 
     <li> 
     <img class="mustSelect" /> 
     </li> 
     <li> 
     <h1 class="mustSelect"></h1> 
     </li> 
    </ul> 
    <div> 
     <span> 
     <a href="" class="mustSelect"></a> 
     </span> 
    </div> 

필요한 요소에 클래스 (class = "mustSelect")를 추가하십시오. 그러면 js에서 다음과 같은 요소를 참조 할 수 있습니다.

$('.mustSelect') 

하면 당신은 클래스, 그것은 어떤 버튼, IMG, H1을 선택 jQuery를 알려주는 다음

$("button, img , h1 , a ", ".main") 

의 .main 클래스의 사용 추가 할 수 없습니다 .

희망이 도움이 될 것입니다. 질문이 있으시면 언제든지 물어보십시오. 감사합니다

3

당신은() 메서드 .find 사용할 수 있습니다

$('.main').find() 
4

의 jQuery 선택기는 CSS 선택기처럼 작동 :

var $button = $('.main > div > div > button'); 

또한 find()을 사용할 수 있습니다 방법 :

var $a = $('.main').find('a'); 

http://api.jquery.com/category/selectors/

당신이 당신의 "컨테이너 사업부"내부의 모든 잎 노드를 선택하려는 경우
2

사실 당신은

$(".main :not(:has(*))") 

이것은 자식 요소가없는 당신의 "컨테이너 사업부"내부의 수준에서 모든 요소를 ​​선택합니다 시도 할 수 있습니다.

관련 문제