web-dev-qa-db-fra.com

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

J'ai une mise en page semblable à celle-ci:

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

et voudrait utiliser un sélecteur jQuery pour sélectionner l'enfant img à l'intérieur du div au clic.

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

$(this)

Comment puis-je obtenir l'enfant img à l'aide d'un sélecteur?

javascriptjqueryjquery-selectorsthis
2161
Alex

Le constructeur jQuery accepte un deuxième paramètre appelé context , qui 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 sont seulement descendants directs de l'élément cliqué, vous pouvez également utiliser .children() :

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

Vous pouvez aussi utiliser

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

qui renverrait tous les imgs qui sont des descendants du div

458
philnash

Si vous avez besoin d’obtenir le premier img avec un niveau inférieur, vous pouvez le faire.

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

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

$(this).next();
74
Roccivic

Le direct enfants est

$('> .child', this)
61
Rayron Victor

Vous pouvez trouver tous les éléments img de parent div 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 ci-dessous est juste

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

Mais si votre div contient plus d'éléments 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. Donc, vous pouvez 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 manière dont vous pouvez trouver un objet réel dans un objet parent. Vous pouvez utiliser des classes pour différencier votre objet enfant. C'est facile 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 spécifique comme:

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

Vous pouvez utiliser find ou children comme ci-dessus. Pour plus de visites enfants http://api.jquery.com/children/ et trouver http://api.jquery.com/find/ . Voir l'exemple http://jsfiddle.net/lalitjs/Nx8a6/

39
Lalit Kumar Maurya

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
33
Oskar

Essayez ce code:

$(this).children()[0]
30
Maxam

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

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

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

1 find ():

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

2 enfants ():

$(this).children('img');
23
Mike Clark

la variable each de jQuery est une option:

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

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

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

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

Et le texte ci-dessous indique si vous n'avez pas de référence à $(this) et que vous souhaitez référencer img disponible dans une div d'une autre fonction.

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

Aussi cela devrait marcher:

$("#id img")
11
tetutato

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

Lorsque vous cliquez sur la DIV, vous obtenez l'image à partir de différentes méthodes. Dans cette situation, "ceci" est la 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 ça aide!

7
RPichioli

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

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

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

L'utilisation conjointe de .find() et .each() évite les erreurs de référence nulles dans le cas d'éléments 0 <img> tout en permettant également la gestion de plusieurs éléments <img>.

// 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>
5
Jason Williams
$(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>
4
CSEngineer