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


2229

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?

Réponses:


2854

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

575
pour ce que ça vaut: jQuery ("img", this) est converti en interne en: jQuery (this) .find ("img") Donc le second est toujours un peu plus rapide. :)
Paul Irish

24
Merci @Paul, je craignais que l'utilisation de find () soit erronée , il s'avère que c'est le seul moyen;)
Agos

5
Si le nœud est un enfant direct, ne serait-il pas plus rapide de simplement faire $ (this) .children ('img'); ?
adamyonk

11
@adamyonk en fait pas, du moins pas s'il s'agit de quelque chose: jsperf.com/jquery-children-vs-find/3
Simon Stender Boisen

3
Je vois exactement le contraire de ce que @PaulIrish a déclaré dans cet exemple - jsperf.com/jquery-selectors-comparison-a . Quelqu'un peut-il nous éclairer? Soit je me suis trompé de test, soit jquery a changé cette optimisation au cours des 4 dernières années.
Jonathan Vanasco

471

Vous pouvez également utiliser

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

qui retournerait tous les imgs qui sont des descendants de ladiv


Dans les cas généraux, il semble que ce $(this).children('img')serait mieux. par exemple <div><img src="..." /><div><img src="..." /></div></div>parce que vraisemblablement l'utilisateur veut trouver des images de 1er niveau.
Buttle Butkus

137

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

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

6
Ne :firstcorrespond- il qu'à "en bas d'un niveau exactement " ou correspond-il au "premier" img trouvé?
Ian Boyd

3
@IanBoyd, .children()c'est d'où vient le "bas exactement d'un niveau" et :firstc'est d'où vient le "premier".
Tyler Crompton

3
@IanBoyd, cet élément ne serait pas pris en compte. Cela ne s'appliquerait que si vous utilisez .find()au lieu de.children()
Tyler Crompton

2
si vous utilisez: d'abord avec un .find () soyez prudent, jQuery semble retrouver tous les descendants puis retourner le premier élément, très cher parfois
Clarence Liu

1
@ButtleButkus Dans la question, il y thisavait déjà une référence au <div>contenant le <img>, cependant si vous avez plusieurs niveaux de balises à parcourir à partir de la référence que vous aviez, alors vous pouvez certainement composer plus d'un children()appel
rakslice

76

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

$(this).next();

16
.next () est vraiment fragile, sauf si vous pouvez toujours garantir que l'élément sera le prochain élément, il est préférable d'utiliser une méthode différente. Dans ce cas, l'IMG est un descendant, pas un frère, du div.
LocalPCGuy

Le PO a explicitement demandé un enfant img à l'intérieur de la div.
Giorgio Tempesta

65

le enfants directs sont

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

3
Cette réponse est potentiellement trompeuse car il n'y a aucun élément avec une classe «enfant», donc cela ne fonctionnera pas.
Giorgio Tempesta

41

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/


35

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

J'utiliserais le nième enfant ()
A McGuinness

31

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

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

54
cela fonctionne probablement, mais c'est un peu la réponse de Rube Goldberg :)
Scott Evernden

8
et si vous allez utiliser ce code, faites au moins: $ ("#" + this.id + "img: first")
LocalPCGuy

10
@LocalPCGuy Vous vouliez dire: "et si vous allez utiliser ce code, appelez à l'aide "
gdoron prend en charge Monica

Pourquoi feriez-vous cela si «ceci» sélectionne déjà le div réel? De plus, si le div n'a pas d'identifiant, ce code ne fonctionnera pas.
Giorgio Tempesta

31

Essayez ce code:

$(this).children()[0]

13
cela fonctionnerait même s'il renvoie un élément dom et non un objet
jq

2
Je ne sais pas si elle est la meilleure approche à la situation actuelle, mais si vous voulez aller dans cette voie et encore jusqu'à la fin avec un objet jQuery, juste envelopper cette façon: $($(this).children()[0]).
patridge

19
ou encore plus simple$(this:first-child)
rémy

4
au lieu d' $($(this).children()[x])utiliser $(this).eq(x)ou si vous voulez le premier, juste $(this).first().
Cristi Mihai

16
@ rémy: Ce n'est même pas une syntaxe valide. (Il a
fallu

23

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

1 trouver ():

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

2 enfants():

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

21

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

15

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


8

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!


5

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>


pourquoi as-tu fait cela? $("body").off("click", "#mydiv").on("click", "#mydiv", function() {
Chris22

Je ne sais pas comment ni où @Alex utilise son extrait. Donc, je l'ai rendu aussi sûr et générique que possible. Attacher un événement au corps fera en sorte que l'événement se déclenchera même si le div n'était pas dans le dom au moment où l'événement a été créé. La suppression de l'événement avant d'en créer un nouveau empêche le gestionnaire de s'exécuter plusieurs fois lorsqu'un événement est déclenché. Il n'est pas nécessaire de le faire à ma façon. Attacher simplement l'événement à la div fonctionnerait également.
Jason Williams

Merci. J'ai déjà vu cela dans un script et alors que cela fonctionnait pour ce que le programmeur voulait, quand j'ai essayé de l'utiliser pour une fenêtre modale, l'événement a quand même créé plusieurs modaux en un seul clic. Je suppose que je l'utilisais mal, mais j'ai fini par utiliser event.stopImmediatePropagation()l'élément pour empêcher que cela ne se produise.
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>


0

Vous pourriez utiliser

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

En quoi est-ce différent de la réponse de philnash il y a 11 ans?
David

0

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

$(this.firstChild);

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.