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

StackOverflow https://stackoverflow.com/questions/306583

Question

J'ai une disposition similaire à celle-ci: 

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

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

Pour obtenir le <=>, j'ai ce sélecteur: 

$(this)

Comment obtenir l'enfant <=> à l'aide d'un sélecteur?

Était-ce utile?

La solution

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 souhaitées sont uniquement des descendants directs de l'élément sur lequel vous avez cliqué, vous pouvez également utiliser .children() : 

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

Autres conseils

Vous pouvez également utiliser 

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

qui renverrait tous les img s descendants du div

Si vous avez besoin d'obtenir le premier img qui correspond exactement à un niveau, vous pouvez le faire

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

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

$(this).next();

Les enfants directs sont 

$('> .child', this)

Vous pouvez trouver tous les éléments img de la division 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 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. 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 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 suit: 

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

et plus spécifique comme: 

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

Vous pouvez utiliser find ou children comme code ci-dessus. Pour plus d'informations, visitez le site http://api.jquery.com/children/ des enfants et recherchez 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 de la 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 find (): 

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

2 enfants (): 

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

jQuery each est 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 ci-dessous, si vous n'avez pas de référence à $(this) et que vous souhaitez référencer img disponible dans un div d'une autre fonction. 

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

Cela devrait également fonctionner: 

$("#id img")

Voici un code fonctionnel que vous pouvez exécuter (c’est une simple démonstration).

Lorsque vous cliquez sur la DIV, vous obtenez l'image de différentes méthodes. Dans cette situation, " this " 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!

Vous pouvez avoir 0 à plusieurs <img> balises dans votre <div>.

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

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

L’utilisation conjointe de <=> et <=> évite les erreurs de référence nulles dans le cas de 0 <=> éléments tout en permettant également la gestion de plusieurs <=> é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>

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top