jQuery: seleccionar elementos desde dentro de un elemento

94

digamos que tengo un marcado como este:

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

y quiero seleccionar #moo.

¿Por qué $('#foo').find('span')funciona, pero $('span', $('#foo'));no?

jquery jquery-selectors parent-child Alex
fuente
10
¿Por qué no $('#moo')? ;) Por cierto. funciona: jsfiddle.net/fkling/k5X2r
Felix Kling
No sé por qué, pero la función que engancho al intervalo seleccionado se aplica a todos los intervalos de la página, no solo al interior de #foo :(
Alex
2
¿Qué pasa cuando ya tiene el elemento seleccionado en una var, por ejemplo, comienza con var ele = $("div #foo")cómo puede llegar a moo desde aquí (sin usar referencias de matriz)?
Worthy7

Respuestas:

129

Puede utilizar cualquiera de estos [empezando por el más rápido]

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

Echar un vistazo

Jishnu AP
fuente
1
Creo que el tercero debería ser span # moo no span # foo?
xr280xr
60

En realidad, $ ('# id', this); seleccionaría #id en cualquier nivel descendiente, no solo el hijo inmediato. Prueba esto en su lugar:

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

o

$("#foo > #moo")

o

$("#foo > span")
Pranay Rana
fuente
Eso no seleccionará nada porque el elemento tiene la ID moo , no la clase.
Felix Kling
3
Vale la pena señalar que .children(), y .find()son similares excepto que los antiguos recorridos sólo un nivel abajo del DOM sub-árbol.
Kevin
Funciona bien, gracias ;-)
Ali Lashini
9

¿Por qué no usar simplemente:

$("#foo span")

o

$("#foo > span")

$('span', $('#foo')); funciona bien en mi máquina;)

cazador
fuente
$($(elementA), 'tr#' + key + ' span')no me funciona (jQuery 1.10.2)
Cody
8

Puede usar la findopción para seleccionar un elemento dentro de otro. Por ejemplo, para encontrar un elemento con id txtName en un div particular, puede usar like

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

Eche un vistazo aquí para consultar un subelemento de un elemento :

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

Cody
fuente
3

.... pero $ ('intervalo', $ ('# foo')); no funciona?

Este método se llama para proporcionar contexto de selector .

En esto, proporciona un segundo argumento al selector de jQuery . Puede ser cualquier cadena de objeto css como pasaría para la selección directa o un elemento jQuery.

p.ej.

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

La línea anterior seleccionará todos los tramos dentro del contenedor que tiene la clase nombrada cont1.

MANIFESTACIÓN

Mohd Abdul Mujib
fuente