jQuery - wybieranie elementów z wnętrza elementu

95

powiedzmy, że mam taki znacznik:

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

i chcę wybrać #moo.

dlaczego $('#foo').find('span')działa, ale $('span', $('#foo'));nie działa?

jquery jquery-selectors parent-child Alex
źródło
10
Dlaczego nie $('#moo')? ;) Przy okazji. to działa: jsfiddle.net/fkling/k5X2r
Felix Kling
Nie wiem dlaczego, ale funkcja, którą podpinam do wybranego zakresu, jest stosowana do wszystkich zakresów na stronie, a nie tylko do tego wewnątrz #foo :(
Alex
2
A co z tym, że masz już wybrany element w zmiennej, więc na przykład zaczniesz od var ele = $("div #foo")tego, jak możesz dostać się stąd do moo (bez korzystania z odniesień do tablic)
Worthy7

Odpowiedzi:

130

Możesz użyć dowolnego z tych [zaczynając od najszybszego]

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

Spójrz

Jishnu AP
źródło
1
Myślę, że trzeci powinien być span # moo nie span # foo?
xr280xr
60

Właściwie $ ('# id', this); wybierze #id na dowolnym poziomie potomnym, a nie tylko bezpośrednim dzieckiem. Spróbuj tego zamiast tego:

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

lub

$("#foo > #moo")

lub

$("#foo > span")
Pranay Rana
źródło
To niczego nie wybierze, ponieważ element ma identyfikator moo , a nie klasę.
Felix Kling
4
Warto to zauważyć .children()i .find()są podobne, z wyjątkiem tego, że ten pierwszy podróżuje tylko o jeden poziom w dół w poddrzewie DOM.
Kevin
10

Dlaczego nie po prostu użyć:

$("#foo span")

lub

$("#foo > span")

$('span', $('#foo')); działa dobrze na moim komputerze;)

Łowca
źródło
$($(elementA), 'tr#' + key + ' span')nie działa dla mnie (jQuery 1.10.2)
Cody
9

Możesz użyć findopcji, aby wybrać element wewnątrz innego. Na przykład, aby znaleźć element o identyfikatorze txtName w określonym elemencie div, możesz użyć like

var name = $('#div1').find('#txtName').val();
Sai Kalyan Kumar Akshinthala
źródło
6

Zajrzyj tutaj - aby zapytać o element podrzędny elementu :

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

Cody
źródło
3

.... ale $ ('span', $ ('# foo')); nie działa?

Ta metoda jest nazywana dostarczaniem kontekstu selektora .

W tym celu podajesz drugi argument do selektora jQuery . Może to być dowolny ciąg obiektu css, tak jak w przypadku bezpośredniego wybierania lub element jQuery.

na przykład.

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

Powyższa linia wybierze wszystkie zakresy w kontenerze o nazwie klasy cont1.

PRÓBNY

Mohd Abdul Mujib
źródło