javascript - zweites - css3 selektoren




Wie bekomme ich die Kinder des $(this) Selektors? (11)

Ich habe ein ähnliches Layout:

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

und möchte mit einem jQuery-Selector das img innerhalb des div beim Klicken auswählen.

Um das div , habe ich diesen Selektor:

$(this)

Wie kann ich das Kind mit einem Selector img bekommen?


Auch das sollte funktionieren:

$("#id img")

Der jQuery-Konstruktor akzeptiert einen zweiten Parameter namens context dem der Kontext der Auswahl überschrieben werden kann.

jQuery("img", this);

Welches ist das Gleiche wie das Verwenden von .find() :

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

Wenn die gewünschten Bilder nur direkte Nachkommen des angeklickten Elements sind, können Sie auch .children() :

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

Hier ist ein Funktionscode, den Sie ausführen können (es ist eine einfache Demonstration).

Wenn Sie auf das DIV klicken, erhalten Sie das Bild von verschiedenen Methoden. In dieser Situation ist dies das 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>

Ich hoffe es hilft!


Möglicherweise haben Sie 0 bis viele <img> -Tags in Ihrem <div> .

Um ein Element zu finden, verwenden Sie eine .find() .

Um Ihren Code sicher zu halten, verwenden Sie eine .each() .

Durch die .find() Verwendung von .find() und .each() bei 0 <img> -Elementen .each() während gleichzeitig auch die Verarbeitung mehrerer <img> -Elemente möglich ist.

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


Ohne die ID des DIV zu kennen, können Sie den IMG folgendermaßen auswählen:

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

Sie können Child Selecor verwenden, um auf die innerhalb des übergeordneten Elements verfügbaren untergeordneten Elemente zu verweisen.

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

Und das Folgende ist, wenn Sie keinen Verweis auf $(this) und img verfügbares div in einer anderen Funktion referenzieren möchten.

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

Sie können eine der folgenden Methoden verwenden:

1 find ():

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

2 Kinder():

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

Sie könnten auch verwenden

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

was würde alle img , die Nachkommen des div


Wenn Sie das erste img benötigen, das genau eine Ebene hat, können Sie dies tun

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

Wenn auf Ihr DIV-Tag unmittelbar das IMG-Tag folgt, können Sie auch Folgendes verwenden:

$(this).next();

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







this