jQuery 동등한 선택자

Question

다음과 정확히 일치합니까? 어떤 관용구를 사용하고 왜 사용합니까?

$('#form1 .edit-field :input') 
$('#form1 .edit-field').find(':input') 
$('.edit-field :input', '#form1') 
$(':input', '#form1 .edit-field') 

Answer 1

나는 # 2, # 4 중 하나를 사용합니다.

jQuery(context).find(selector); 

이유 나는 # 1을 피할 것 그들이 상당히보다 느린 # 2/# 모두 4이기 때문에 # 3은 다음과 같습니다 커튼 뒤에 당신이 어쨌든 무슨 일이 일어나고있는 상황을 지정할 때.

---

편집 : 당신의 선택기를 사용하여 1000 입력 요소 : 그냥 빨리 테스트를했다

$('#form1 .edit-field :input')   // 55ms 
$('#form1 .edit-field').find(':input') // 21ms 
$('.edit-field :input', '#form1')   // 47ms 
$(':input', '#form1 .edit-field')   // 18ms 

Answer 2

처음 두 요소는 요소 선택을 비교할 때 동일합니다.

$('#form1 .edit-field').find(':input') 
    ... 
.end().find(':hidden')... 
.end()... 

내가 불확실 해요 : 그러나, correspoding end() 호출을 명령 체인에 사용되는 두 번째 형태는, 즉, "# ​​개를 Form1의 .edit 필드"에서 더 자식 요소를 선택할 수 있습니다 두 번째 두 가지 형식은 실제로 유효하지 않습니다. 만약 내가 틀렸다면 정정 해줘,하지만 워드 프로세서를 기반으로, 올바른 구문은 다음과 같습니다

$('.edit-field :input', $('#form1')) 
$(':input', $('#form1 .edit-field')) 

어느 방법이이 같은 말을 덜 consise의 방법은 이럴.

요약하면 위에서 설명한 것처럼 두 번째 장점을 활용하여 추가 자녀를 트래 피킹하지 않는 한 일반적으로 첫 번째 양식을 고수 할 것입니다.

Answer 3

jQuery에서 I 코드가 많을수록 선택기가 적어지고 대신 더 많이 트래버스합니다. 나는 할 것이다 :

$('#form1').find('.edit-field').find(':input') 

더 길지만 각 단계에 대해 조금 더 의미가있는 선택 과정을 더 잘 전달한다. 이동은 체인 연결에 유리하며 end()를 유용하게 만듭니다.

$('#form1 .edit-field').find(':input') 
$(':input', '#form1 .edit-field') 

위의 두

은 본질적으로 동일합니다

Answer 4

나는 것 이미 나는 또한 함께 작동하도록 필요한 요소가 무엇에 따라 서로 다른 양식을 사용 . 예를 들어 같은 양식의 다른 필드로 작업해야하는 경우 $ ('# form1')에 대한 참조를 저장하여 여러 번 검색하지 않아도됩니다.