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?

Alex
la source

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");
Simon
la source
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

philnash
la source
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")
rakslice
la source
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();
Roccivic
la source
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)
Rayron Victor
la source
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/

Lalit Kumar Maurya
la source
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
Oskar
la source
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")
Adam
la source
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]
Maxam
la source
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');
Mike Clark
la source
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'));
});
Thirumalai murugan
la source
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");
Dennis R
la source
12

Cela devrait également fonctionner:

$("#id img")
tetutato
la source
2
l'op voulait utiliserthis
Bhargav Nanekalva
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!

RPichioli
la source
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>

Jason Williams
la source
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>

CSEngineer
la source
0

Vous pourriez utiliser

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 $(this).find('img');
</script>
Hassan Fayyaz
la source
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);

Kamil Kiełczewski
la source