jQuery - 요소 내부에서 요소 선택

jQuery - 요소 내부에서 요소 선택

제가 마크업을 한다고 가정해 보겠습니다.

<div id="foo">
  ...
  <span id="moo">
    ...
  </span>
  ...
</div>

저는 #moo를 선택하고 싶습니다.

왜죠$('#foo').find('span')효과는 있지만,$('span', $('#foo'));안 그래요?

이 중에서 가장 빠른 것부터 사용 가능합니다.

$("#moo") > $("#foo #moo") > $("div#foo span#moo") > $("#foo span") > $("#foo > #moo")

한번 보세요.

실제로 $('#id', this); 바로 자식이 아닌 하위 수준에서 #id를 선택합니다.대신 이 방법을 사용해 보십시오.

$(this).children('#id');

아니면

$("#foo > #moo")

아니면

$("#foo > span")

사용가능find옵션: 다른 내부의 요소를 선택합니다.예를 들어, 특정 div에서 ID txtName을 가진 요소를 찾으려면 다음과 같이 사용할 수 있습니다.

var name = $('#div1').find('#txtName').val();

사용만 하면 안 되는 이유:

$("#foo span")

아니면

$("#foo > span")

---

$('span', $('#foo'));내 기계에서 잘 작동합니다 ;)

요소의 하위 요소를 쿼리하려면 여기를 확인합니다.

$(document.getElementById('parentid')).find('div#' + divID + ' span.child');

......하지만 $('span', $('#foo'); 작동하지 않습니까?

이 메서드를 선택자 컨텍스트 제공이라고 합니다.

이 경우 jQuery 선택기에 두 번째 인수를 제공합니다.그것은 당신이 직접 선택하거나 jQuery 요소를 통과하는 것과 같이 어떤 cs 개체 문자열이 될 수 있습니다.

예를 들면

$("span",".cont1").css("background", '#F00');

위 줄은 이름이 지정된 클래스를 가진 컨테이너 내의 모든 범위를 선택합니다.cont1.

데모

둘 다 일하는 것 같습니다.

fiddle 참조: http://jsfiddle.net/maniator/PSxkS/

언급URL : https://stackoverflow.com/questions/5808606/jquery-selecting-elements-from-inside-a-element