Comment obtenir les enfants du sélecteur $ (this)?

J'ai une disposition similaire à celle-ci:

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

et souhaite utiliser un sélecteur jQuery pour sélectionner l'enfant imgà l'intérieur du divclic.

Pour l'obtenir div, j'ai ce sélecteur:

$(this)

Comment puis-je amener l'enfant à l' imgaide d'un sélecteur?

Le constructeur jQuery accepte un 2e paramètre appelé contextqui peut être utilisé pour remplacer le contexte de la sélection.

jQuery("img", this);

Ce qui revient à utiliser .find()comme ceci:

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

Si les images que vous désirez ne sont que des descendants directs de l'élément cliqué, vous pouvez également utiliser .children():

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

Vous pouvez également utiliser

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

qui retournerait tous les imgs qui sont des descendants de ladiv

Si vous avez besoin d'obtenir le premier imgqui est en bas d'un niveau exactement, vous pouvez le faire

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

Si votre balise DIV est immédiatement suivie de la balise IMG, vous pouvez également utiliser:

$(this).next();

le enfants directs sont

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

Vous pouvez trouver tous les éléments img de div parent comme ci-dessous

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

Si vous voulez un élément img spécifique, vous pouvez écrire comme ceci

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

Votre div ne contient qu'un seul élément img. Donc, pour cela, c'est juste

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

Mais si votre div contient plus d'élément img comme ci-dessous

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

alors vous ne pouvez pas utiliser le code supérieur pour trouver la valeur alternative du deuxième élément img. Vous pouvez donc essayer ceci:

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

Cet exemple montre une idée générale de la façon dont vous pouvez trouver un objet réel dans l'objet parent. Vous pouvez utiliser des classes pour différencier votre objet enfant. C'est simple et amusant. c'est à dire

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

Vous pouvez le faire comme ci-dessous:

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

et plus précis comme:

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

Vous pouvez utiliser find ou children comme le code ci-dessus. Pour plus d'informations, visitez Enfants http://api.jquery.com/children/ et trouvez http://api.jquery.com/find/ . Voir l'exemple http://jsfiddle.net/lalitjs/Nx8a6/

Façons de faire référence à un enfant dans jQuery. Je l'ai résumé dans le jQuery suivant:

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

Sans connaître l'ID du DIV, je pense que vous pouvez sélectionner l'IMG comme ceci:

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

Essayez ce code:

$(this).children()[0]

Vous pouvez utiliser l'une des méthodes suivantes:

1 trouver ():

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

2 enfants():

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

jQuery eachest une option:

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

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

Vous pouvez utiliser Child Selecor pour référencer les éléments enfants disponibles dans le parent.

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

Et ce qui suit est si vous n'avez pas de référence à $(this)et que vous souhaitez faire référence imgdisponible dans une divautre fonction.

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

Cela devrait également fonctionner:

$("#id img")

Voici un code fonctionnel, vous pouvez l'exécuter (c'est une simple démonstration).

Lorsque vous cliquez sur le DIV, vous obtenez l'image à partir de différentes méthodes, dans cette situation "ceci" est le 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>

J'espère que cela aide!

Vous pouvez avoir 0 à plusieurs <img>balises à l'intérieur de votre <div>.

Pour rechercher un élément, utilisez un .find() .

Pour protéger votre code, utilisez a .each().

Utiliser .find()et .each()ensemble empêche les erreurs de référence nulles dans le cas de 0 <img>éléments tout en permettant la gestion de plusieurs <img>éléments.

// 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>

Vous pourriez utiliser

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

Si votre img est exactement le premier élément à l'intérieur de div, essayez

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