jQuery - selecionando elementos de dentro de um elemento

94

digamos que eu tenha uma marcação como esta:

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

e quero selecionar #moo.

porque $('#foo').find('span')funciona, mas $('span', $('#foo'));não funciona?

jquery jquery-selectors parent-child Alex
fonte
10
Porque não $('#moo')? ;) Btw. funciona: jsfiddle.net/fkling/k5X2r
Felix Kling
Não sei por que, mas a função que engano ao intervalo selecionado é aplicada a todos os intervalos da página, não apenas a um dentro de #foo :(
Alex
2
E quando você já tem o elemento selecionado em uma var, então, por exemplo, você começa com var ele = $("div #foo")como você pode obter o moo a partir daqui (sem usar referências de array)
Worthy7

Respostas:

129

Você pode usar qualquer um destes [começando pelo mais rápido]

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

Dê uma olhada

Jishnu AP
fonte
1
Acho que o terceiro deve ser span # moo not span # foo?
xr280xr
60

Na verdade, $ ('# id', this); selecionaria #id em qualquer nível descendente, não apenas o filho imediato. Em vez disso, tente isto:

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

ou

$("#foo > #moo")

ou

$("#foo > span")
Pranay Rana
fonte
Isso não selecionará nada porque o elemento tem o ID moo , não a classe.
Felix Kling
3
É importante notar isso .children()e .find()são semelhantes, exceto que o primeiro viaja apenas um nível abaixo da subárvore DOM.
Kevin
Funciona bem, obrigado ;-)
Ali Lashini,
9

Por que não apenas usar:

$("#foo span")

ou

$("#foo > span")

$('span', $('#foo')); funciona bem na minha máquina;)

caçador
fonte
$($(elementA), 'tr#' + key + ' span')não está funcionando para mim (jQuery 1.10.2)
Cody
8

Você pode usar a findopção de selecionar um elemento dentro de outro. Por exemplo, para encontrar um elemento com id txtName em um div específico, você pode usar como

var name = $('#div1').find('#txtName').val();
Sai Kalyan Kumar Akshinthala
fonte
6

Dê uma olhada aqui - para consultar um subelemento de um elemento :

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

Cody
fonte
3

.... mas $ ('span', $ ('# foo')); não funciona?

Este método é chamado de fornecer contexto do seletor .

Nele, você fornece um segundo argumento para o seletor jQuery . Pode ser qualquer string de objeto css exatamente como você passaria para seleção direta ou um elemento jQuery.

por exemplo.

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

A linha acima selecionará todos os spans dentro do container que possui a classe nomeada cont1.

DEMO

Mohd Abdul Mujib
fonte