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

Ich habe ein ähnliches Layout:

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

und möchte einen jQuery-Selektor verwenden, um das untergeordnete Element imginnerhalb des divOn-Klicks auszuwählen .

Um das zu bekommen div, habe ich diesen Selektor:

$(this)

Wie kann ich das Kind imgmit einem Selektor dazu bringen?

Der jQuery-Konstruktor akzeptiert einen zweiten aufgerufenen Parameter, mit contextdem der Kontext der Auswahl überschrieben werden kann.

jQuery("img", this);

Welches ist das gleiche wie die Verwendung .find()wie folgt :

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

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

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

Sie könnten auch verwenden

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

das würde alle imgs zurückgeben, die Nachkommen der sinddiv

Wenn Sie die erste benötigen, die imggenau eine Ebene tiefer liegt, 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();

Die direkten Kinder sind

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

Sie finden alle img-Elemente des übergeordneten div wie unten

$(this).find('img') or $(this).children('img')

Wenn Sie ein bestimmtes img-Element möchten, können Sie so schreiben

$(this).children('img:nth(n)')  
// where n is the child place in parent list start from 0 onwards

Ihr div enthält nur ein img-Element. Also dafür ist unten richtig

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

Aber wenn dein div mehr img element enthält wie unten

<div class="mydiv">
    <img src="test.png" alt="3">
    <img src="test.png" alt="4">
</div>

dann können Sie keinen oberen Code verwenden, um den Alt-Wert des zweiten img-Elements zu finden. Sie können dies also versuchen:

 $(this).find("img:last-child").attr("alt")
                   OR
 $(this).children("img:last-child").attr("alt")

Dieses Beispiel zeigt eine allgemeine Vorstellung davon, wie Sie das tatsächliche Objekt im übergeordneten Objekt finden können. Sie können Klassen verwenden, um Ihr untergeordnetes Objekt zu unterscheiden. Das ist einfach und macht Spaß. dh

<div class="mydiv">
    <img class='first' src="test.png" alt="3">
    <img class='second' src="test.png" alt="4">
</div>

Sie können dies wie folgt tun:

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

und genauer als:

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

Sie können find oder Kinder wie oben beschrieben verwenden. Weitere Informationen finden Sie unter Kinder unter http://api.jquery.com/children/ und unter http://api.jquery.com/find/ . Siehe Beispiel http://jsfiddle.net/lalitjs/Nx8a6/

Möglichkeiten, auf ein Kind in jQuery zu verweisen. Ich habe es in der folgenden jQuery zusammengefasst:

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

Ohne die ID des DIV zu kennen, könnten Sie den IMG wie folgt auswählen:

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

Versuchen Sie diesen Code:

$(this).children()[0]

Sie können eine der folgenden Methoden verwenden:

1 find ():

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

2 Kinder():

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

jQuery's eachist eine Option:

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

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

Mit Child Selecor können Sie auf die untergeordneten Elemente verweisen, die im übergeordneten Element verfügbar sind.

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

Und das Folgende ist, wenn Sie keinen Verweis auf haben $(this)und einen Verweis imginnerhalb einer divanderen Funktion verfügbar machen möchten .

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

Auch das sollte funktionieren:

$("#id img")

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

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

Sie können 0 bis viele <img>Tags in Ihrem haben <div>.

Verwenden Sie a, um ein Element zu finden .find().

Verwenden Sie a, um Ihren Code zu schützen .each().

Die Verwendung von .find()und .each()zusammen verhindert Nullreferenzfehler bei 0 <img>Elementen und ermöglicht gleichzeitig die Behandlung mehrerer <img>Elemente.

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

Du könntest benutzen

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

Wenn Ihr img genau das erste Element in div ist, versuchen Sie es

$(this.firstChild);

$( "#box" ).click( function() {
  let img = $(this.firstChild);
  console.log({img});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="box"><img src="https://picsum.photos/seed/picsum/300/150"></div>