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

Tengo un diseño similar a este:

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

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

Para obtener el div, Tengo este selector:

$(this)

¿Cómo puedo conseguir al niño? img usando un selector?

preguntado el 20 de noviembre de 08 a las 17:11

18 Respuestas

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

jQuery("img", this);

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

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

Si las imágenes que deseas son , solamente descendientes directos del elemento en el que se hizo clic, también puede usar .children():

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

Respondido el 25 de junio de 14 a las 21:06

por lo que vale: jQuery ("img", esto) se convierte internamente en: jQuery (esto) .find ("img") Así que el segundo es ligeramente más rápido. :) - Paul irlandés

Gracias @Paul, me preocupaba que el uso de find () fuera Mal, resulta que es la única forma;) - Agos

Si el nodo es un hijo directo, ¿no sería más rápido simplemente hacer $ (this) .children ('img'); ? - Adamyonk

@adamyonk de hecho no, al menos no si esto es algo por lo que pasar: jsperf.com/jquery-children-vs-find/3 - Simón Stender Boisen

Veo 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

También podrías usar

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

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

respondido 20 nov., 08:21

En casos generales, parece que $(this).children('img') seria mejor. p.ej <div><img src="..." /><div><img src="..." /></div></div> porque presumiblemente el usuario quiere encontrar imágenes de primer nivel. - mayordomo butkus

Si necesita obtener el primero img eso es exactamente un nivel, puedes hacer 

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

Respondido 21 Jul 11, 19:07

¿Afecta la regulación de la :first solo coincide "abajo exactamente un nivel", o coincide al "primero" img que fue encontrado? - Ian Boyd

@IanBoyd, .children() es de donde viene el "abajo exactamente un nivel" y :first es de donde vino el "primero". - Tyler Crompton

@IanBoyd, ese elemento no se tendría en cuenta. Solo se aplicaría si usa .find() en lugar de .children() - Tyler Crompton

si está usando: primero con un .find () tenga cuidado, jQuery parece encontrar todos los descendientes y luego devolver el primer elemento, muy caro a veces - clarence

@ButtleButkus En la pregunta, this ya era una referencia a la <div> que contiene el <img>, sin embargo, si tiene varios niveles de etiqueta para atravesar de la referencia que tenía, definitivamente podría componer más de una children() llamada - rebanada de raks

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

$(this).next();

respondido 27 nov., 11:00

.next () es realmente frágil, a menos que siempre pueda 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. - Jorge Tempesta

EL de reservas los niños es 

$('> .child-class', this)

Respondido el 19 de diciembre de 19 a las 18:12

Esta respuesta es potencialmente engañosa ya que no hay ningún elemento con una clase 'secundaria', por lo que no funcionará. - Jorge Tempesta

Puede encontrar todos los elementos img del div principal como se muestra a continuación

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

Si desea un elemento img específico, puede 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 de abajo es correcto

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

Pero si su div contiene más elemento 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 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>

Puede 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 buscar o niños 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/

Respondido el 04 de diciembre de 13 a las 04:12

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

Respondido el 25 de enero de 15 a las 13:01

Yo usaría el n-ésimo niño () - Una McGuinness

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

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

respondido 20 nov., 08:19

esto probablemente realmente funcione, pero es un poco la respuesta de Rube Goldberg :) - Scott Everden

y si va a usar ese código, al menos haga: $ ("#" + this.id + "img: primero") - LocalPCGuy

@LocalPCGuy Quisiste decir: "y si va a utilizar ese código llamar por ayuda" - gdoron está apoyando a Monica

¿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á. - Jorge Tempesta

Pruebe este código:

$(this).children()[0]

Respondido el 17 de junio de 13 a las 19:06

eso funcionaría aunque devuelve un elemento dom, no un objeto jq - cuadrado rojo

No sé si es el mejor enfoque para la situación actual, pero si desea seguir esta ruta y aún así terminar con un objeto jQuery, simplemente envuélvalo de esa manera: $($(this).children()[0]). - perdiz

o incluso más fácil $(this:first-child) - remy

en lugar de $($(this).children()[x]) utilizan el $(this).eq(x) o si quieres el primero, solo $(this).first(). - Cristi Mihai

@ rémy: Esa ni siquiera es una sintaxis válida. (Pasaron 2 años para que alguien se diera cuenta ...) - BoltClock ♦

Puede utilizar cualquiera de los siguientes métodos:

1 buscar (): 

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

2 niños(): 

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

Respondido 21 ago 15, 07:08

jQuery's each es una opción:

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

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

Respondido el 23 de junio de 14 a las 08:06

Puedes usar Niño 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 a $(this) y quieres hacer referencia img disponible dentro de un div de otra función.

 $('#divid > img').attr("src");

Respondido 25 Jul 14, 22:07

También esto debería funcionar:

$("#id img")

Respondido 21 ago 15, 07:08

la operación quería usar this - Bhargav Nanekalva

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

Cuando haces clic en 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!

Respondido 09 Oct 17, 14:10

Puede tener de 0 a muchos <img> etiquetas dentro de tu <div>.

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

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

Usar .find() y .each() juntos previenen errores de referencia nula 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>

Respondido el 11 de Septiembre de 17 a las 21:09

¿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. Al adjuntar un evento al cuerpo, el evento se activará 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 activa un evento. No es necesario hacerlo a mi manera. Simplemente adjuntar el evento al div también funcionaría. - Jason Williams

Gracias. He visto esto 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 creaba varios modales con un solo clic. Supongo que lo estaba usando mal, pero terminé usando event.stopImmediatePropagation() en el elemento para evitar que eso suceda. - Chris22 

$(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>

respondido 05 mar '17, 13:03

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

$(this.firstChild);


$( "#box" ).click( function() {
  let img = $(this.firstChild);
  console.log({img});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="box"><img src="https://picsum.photos/seed/picsum/300/150"></div>

contestado el 07 de mayo de 20 a las 09:05

Podrías usar

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 $(this).find('img');
</script>

Respondido el 19 de Septiembre de 19 a las 08:09

¿En qué se diferencia esto de la respuesta de philnash hace 11 años? - David

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.