¿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 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?

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");

También podrías usar

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

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

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

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

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

$(this).next();

Los niños directos son

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

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/

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

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

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

Prueba este código:

$(this).children()[0]

Puede usar cualquiera de los siguientes métodos:

1 encontrar ():

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

2 niños():

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

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'));
});

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");

También esto debería funcionar:

$("#id img")

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!

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>

Podrías usar

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

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>