Pregunta ¿Cómo obtener los hijos del selector $ (this)?


Tengo un diseño similar a esto:

<div id="..."><img src="..."></div>

y me gustaría usar un selector jQuery para seleccionar al niño img dentro de div al hacer clic.

Para obtener el div, Tengo este selector:

$(this)

¿Cómo puedo obtener el niño img usando un selector?


2042
2017-11-20 19:44


origen


Respuestas:


El constructor jQuery acepta un segundo parámetro llamado context que puede usarse para anular el contexto de la selección.

jQuery("img", this);

Lo cual es lo mismo que usar .find() Me gusta esto:

jQuery(this).find("img");

Si los imgs que deseas son solamente descendientes directos del elemento cliqueado, también puedes usar .children():

jQuery(this).children("img");

2687
2017-11-20 21:27



También podrías usar

$(this).find('img');

que devolvería todo imgs que son descendientes de la div


444
2017-11-20 21:23



Si necesitas obtener la primera img eso es exactamente un nivel, puedes hacer

$(this).children("img:first")

127
2017-07-21 18:47



Si su etiqueta DIV es seguida inmediatamente por la etiqueta IMG, también puede usar:

$(this).next();

71
2018-06-21 13:25



los directo los niños son

$('> .child', this)

56
2017-07-16 20:07



Puedes encontrar todo el elemento img de div para padres como a continuación

$(this).find('img') or $(this).children('img')

Si quieres un elemento img específico, puedes escribir así

$(this).children('img:nth(n)')  
// where n is the child place in parent list start from 0 onwards

Tu div contiene solo un elemento img. Entonces, para esto a continuación es correcto

 $(this).find("img").attr("alt")
                  OR
  $(this).children("img").attr("alt")

Pero si su div contiene más elementos img como a continuación

<div class="mydiv">
    <img src="test.png" alt="3">
    <img src="test.png" alt="4">
</div>

entonces no puedes usar el código superior para encontrar el valor alt del segundo elemento img. Entonces puedes probar esto:

 $(this).find("img:last-child").attr("alt")
                   OR
 $(this).children("img:last-child").attr("alt")

Este ejemplo muestra una idea general de cómo puede encontrar un objeto real dentro del objeto principal. Puede usar clases para diferenciar su objeto hijo. Eso es fácil y divertido. es decir

<div class="mydiv">
    <img class='first' src="test.png" alt="3">
    <img class='second' src="test.png" alt="4">
</div>

Puedes hacer esto de la siguiente manera:

 $(this).find(".first").attr("alt")

y más específico como:

 $(this).find("img.first").attr("alt")

Puede usar find o children como el código anterior. Para más visita, Niños http://api.jquery.com/children/ y encontrar http://api.jquery.com/find/. Ver ejemplo http://jsfiddle.net/lalitjs/Nx8a6/


36
2018-03-22 08:05



Sin conocer la ID de la DIV, creo que podría seleccionar la IMG de esta manera:

$("#"+$(this).attr("id")+" img:first")

29
2017-11-20 19:56



Prueba este código:

$(this).children()[0]

27
2017-11-20 19:51



Formas de referirse a un niño en jQuery. Lo resumí en el siguiente jQuery:

$(this).find("img"); // any img tag child or grandchild etc...   
$(this).children("img"); //any img tag child that is direct descendant 
$(this).find("img:first") //any img tag first child or first grandchild etc...
$(this).children("img:first") //the first img tag  child that is direct descendant 
$(this).children("img:nth-child(1)") //the img is first direct descendant child
$(this).next(); //the img is first direct descendant child

27
2018-01-25 10:51



Puede usar cualquiera de los siguientes métodos:

1 hallazgo (): 

$(this).find('img');

2 niños(): 

$(this).children('img');

19
2017-08-14 11:29