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

2229

Tengo un diseño similar a este:

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

y me gustaría usar un selector jQuery para seleccionar al niño imgdentro del divclic.

Para obtener el div, tengo este selector:

$(this)

¿Cómo puedo hacer que el niño imguse un selector?

Alex
fuente

Respuestas:

2854

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

jQuery("img", this);

Lo cual es lo mismo que usar .find()así:

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

Si los IMGs que usted desea son solamente los descendientes directos del elemento se ha hecho clic, también se puede utilizar .children():

jQuery(this).children("img");
Simón
fuente
575
por lo que vale: jQuery ("img", esto) se convierte internamente en: jQuery (this) .find ("img") Así que el segundo es ligeramente más rápido. :)
Paul Irish
24
Gracias @Paul, me preocupaba que usar find () fuera incorrecto , resulta que es la única forma;)
Agos
55
Si el nodo es un hijo directo, ¿no sería más rápido simplemente hacer $ (this) .children ('img'); ?
adamyonk
11
@adamyonk de hecho no, al menos no si esto es algo para pasar: jsperf.com/jquery-children-vs-find/3
Simon Stender Boisen
3
Estoy viendo exactamente lo contrario de lo que dijo @PaulIrish en este ejemplo: jsperf.com/jquery-selectors-comparison-a . ¿Alguien puede arrojar algo de luz? O me equivoqué en el caso de prueba, o jquery cambió esta optimización en los últimos 4 años.
Jonathan Vanasco
471

También podrías usar

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

que devolvería todos los imgs que son descendientes de ladiv

philnash
fuente
En casos generales, parece $(this).children('img')que sería mejor. por ejemplo, <div><img src="..." /><div><img src="..." /></div></div>porque presumiblemente el usuario quiere encontrar imgs de primer nivel.
Buttle Butkus
137

Si necesita obtener el primero imgque está exactamente en un nivel, puede hacerlo

$(this).children("img:first")
rakslice
fuente
66
¿ :firstSolo coincide con " bajar exactamente un nivel ", o coincide con el "primero" img que se encontró?
Ian Boyd
3
@IanBoyd, .children()es de donde viene el "bajar exactamente un nivel" y :firstes de donde vino el "primero".
Tyler Crompton
3
@IanBoyd, ese elemento no se tendría en cuenta. Solo se aplicaría si usa en .find()lugar de.children()
Tyler Crompton
2
si está usando: primero con un .find () tenga cuidado, jQuery parece encontrar a todos los descendientes y luego devuelve el primer elemento, a veces muy costoso
Clarence Liu
1
@ButtleButkus En la pregunta, thisya era una referencia al <div>contenido <img>, sin embargo, si tiene varios niveles de etiqueta para atravesar la referencia que tenía, definitivamente podría componer más de una children()llamada
rakslice
76

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

$(this).next();
Roccívico
fuente
16
.next () es realmente frágil, a menos que siempre puedas garantizar que el elemento será el siguiente elemento, es mejor usar un método diferente. En este caso, el IMG es un descendiente, no un hermano, del div.
LocalPCGuy
El OP solicitó explícitamente un niño img dentro del div.
Giorgio Tempesta
65

Los niños directos son

$('> .child-class', this)
Rayron Victor
fuente
3
Esta respuesta es potencialmente engañosa ya que no hay ningún elemento con una clase 'secundaria', por lo que no funcionará.
Giorgio Tempesta
41

Puedes encontrar todos los elementos img del elemento principal div 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

Su 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 tu 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 puede usar el código superior para encontrar el valor alternativo 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 padre. 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 información, visite http://api.jquery.com/children/ y encuentre http://api.jquery.com/find/ . Ver ejemplo http://jsfiddle.net/lalitjs/Nx8a6/

Lalit Kumar Maurya
fuente
35

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
Oskar
fuente
Yo usaría el nth-child ()
A McGuinness
31

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

$("#"+$(this).attr("id")+" img:first")
Adán
fuente
54
esto probablemente realmente funciona, pero es un poco la respuesta de Rube Goldberg :)
Scott Evernden
8
y si va a usar ese código, al menos haga: $ ("#" + this.id + "img: first")
LocalPCGuy
10
@LocalPCGuy Querías decir: "y si vas a usar ese código, pide ayuda "
gdoron está apoyando a Monica el
¿Por qué harías esto si 'esto' ya selecciona el div real? Además, si el div no tiene una identificación, este código no funcionará.
Giorgio Tempesta
31

Prueba este código:

$(this).children()[0]
Maxam
fuente
13
eso funcionaría aunque devuelva un elemento dom no un objeto jq
redsquare
2
No sé si es la mejor aproximación a la situación actual, pero si quiere seguir este camino y aún así terminar con un objeto jQuery, simplemente envuelva esa manera: $($(this).children()[0]).
patridge
19
o incluso más fácil$(this:first-child)
rémy
44
en lugar de $($(this).children()[x])usar $(this).eq(x)o si quieres el primero, solo $(this).first().
Cristi Mihai
16
@ rémy: Esa ni siquiera es una sintaxis válida. (Tomó 2 años para que cualquiera lo notara ...)
BoltClock
23

Puede usar cualquiera de los siguientes métodos:

1 encontrar ():

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

2 niños():

$(this).children('img');
Mike Clark
fuente
21

jQuery's eaches una opción:

<div id="test">
    <img src="testing.png"/>
    <img src="testing1.png"/>
</div>

$('#test img').each(function(){
    console.log($(this).attr('src'));
});
Thirumalai murugan
fuente
15

Puede usar Child Selecor para hacer referencia a los elementos secundarios disponibles dentro del elemento primario.

$(' > img', this).attr("src");

Y lo siguiente es si no tiene referencia $(this)y desea hacer referencia imgdisponible dentro divde otra función.

 $('#divid > img').attr("src");
Dennis R
fuente
12

También esto debería funcionar:

$("#id img")
tetutato
fuente
2
el this
operador
8

Aquí hay un código funcional, puede ejecutarlo (es una demostración simple).

Cuando haces clic en el DIV obtienes la imagen de diferentes métodos, en esta situación "esto" es el DIV.

$(document).ready(function() {
  // When you click the DIV, you take it with "this"
  $('#my_div').click(function() {
    console.info('Initializing the tests..');
    console.log('Method #1: '+$(this).children('img'));
    console.log('Method #2: '+$(this).find('img'));
    // Here, i'm selecting the first ocorrence of <IMG>
    console.log('Method #3: '+$(this).find('img:eq(0)'));
  });
});
.the_div{
  background-color: yellow;
  width: 100%;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my_div" class="the_div">
  <img src="...">
</div>

¡Espero eso ayude!

RPichioli
fuente
5

Puede tener de 0 a muchas <img>etiquetas dentro de su <div>.

Para encontrar un elemento, use un .find() .

Para mantener su código seguro, use a .each().

Usar .find()y .each()juntos evita errores de referencia nulos en el caso de 0 <img>elementos, al tiempo que permite el manejo de múltiples <img>elementos.

// Set the click handler on your div
$("body").off("click", "#mydiv").on("click", "#mydiv", function() {

  // Find the image using.find() and .each()
  $(this).find("img").each(function() {
  
        var img = this;  // "this" is, now, scoped to the image element
        
        // Do something with the image
        $(this).animate({
          width: ($(this).width() > 100 ? 100 : $(this).width() + 100) + "px"
        }, 500);
        
  });
  
});
#mydiv {
  text-align: center;
  vertical-align: middle;
  background-color: #000000;
  cursor: pointer;
  padding: 50px;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="mydiv">
  <img src="" width="100" height="100"/>
</div>

Jason Williams
fuente
¿Por qué hiciste esto? $("body").off("click", "#mydiv").on("click", "#mydiv", function() {
Chris22
No sé cómo o dónde @Alex está usando su fragmento. Entonces, lo hice lo más seguro y genérico posible. Adjuntar un evento al cuerpo hará que el evento se dispare incluso si el div no estaba en el dom en el momento en que se creó el evento. Borrar el evento antes de crear uno nuevo evita que el controlador se ejecute más de una vez cuando se desencadena un evento. No es necesario hacerlo a mi manera. Simplemente adjuntar el evento al div también funcionaría.
Jason Williams
Gracias. Lo he visto antes en un script y, aunque funcionó para lo que pretendía el programador, cuando intenté usarlo para una ventana modal, el evento aún creó varios modales con un solo clic. Supongo que lo estaba usando mal, pero terminé usando event.stopImmediatePropagation()el elemento para evitar que eso suceda.
Chris22
4

$(document).ready(function() {
  // When you click the DIV, you take it with "this"
  $('#my_div').click(function() {
    console.info('Initializing the tests..');
    console.log('Method #1: '+$(this).children('img'));
    console.log('Method #2: '+$(this).find('img'));
    // Here, i'm selecting the first ocorrence of <IMG>
    console.log('Method #3: '+$(this).find('img:eq(0)'));
  });
});
.the_div{
  background-color: yellow;
  width: 100%;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my_div" class="the_div">
  <img src="...">
</div>

CSEngineer
fuente
0

Podrías usar

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 $(this).find('img');
</script>
Hassan Fayyaz
fuente
¿Cómo es esto diferente de la respuesta de philnash hace 11 años?
David
0

Si su img es exactamente el primer elemento dentro de div, intente

$(this.firstChild);

Kamil Kiełczewski
fuente