it-swarm.com.de

Wie bekommt man 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 img innerhalb des div beim Klicken auszuwählen.

Um das div zu erhalten, habe ich diesen Selektor:

$(this)

Wie kann ich das Kind img mit einem Selektor bekommen?

2161
Alex

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

jQuery("img", this);

Das ist dasselbe wie .find() wie folgt:

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

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

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

Sie könnten auch verwenden

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

das würde alle imgs zurückgeben, die Nachkommen des div sind

458
philnash

Wenn Sie das erste img benötigen, das genau eine Stufe niedriger ist, können Sie dies tun

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

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

$(this).next();
74
Roccivic

Die direkten Kinder sind

$('> .child', this)
61
Rayron Victor

Du findest alle img Elemente von parent div wie unten

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

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

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

Dein 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 Elemente wie unten enthält

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

dann können Sie den oberen Code nicht verwenden, um den Alt-Wert des zweiten img-Elements zu ermitteln. So können Sie dies versuchen:

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

Dieses Beispiel zeigt eine allgemeine Idee, 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ß. d.h.

<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 spezieller als:

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

Sie können find oder children als obigen Code verwenden. Weitere Informationen finden Sie unter Children http://api.jquery.com/children/ und Find http://api.jquery.com/find/ . Siehe Beispiel http://jsfiddle.net/lalitjs/Nx8a6/

39

Möglichkeiten, in jQuery auf ein untergeordnetes Element 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
33
Oskar

Versuchen Sie diesen Code:

$(this).children()[0]
30
Maxam

Ohne die ID des DIV zu kennen, könnte man das IMG wie folgt auswählen:

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

Sie können eine der folgenden Methoden anwenden:

1 find ():

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

2 Kinder ():

$(this).children('img');
23
Mike Clark

jQueries each ist eine Option:

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

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

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

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

Das Folgende ist, wenn Sie nicht auf $(this) verweisen und auf img verweisen möchten, das innerhalb einer div von einer anderen Funktion verfügbar ist.

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

Auch das sollte funktionieren:

$("#id img")
11
tetutato

Hier ist ein Funktionscode, den Sie ausführen können (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!

7
RPichioli

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

Verwenden Sie zum Suchen eines Elements .find().

Verwenden Sie zum Schutz Ihres Codes .each().

Wenn Sie .find() und .each() zusammen verwenden, werden Nullreferenzfehler im Fall von 0 <img> -Elementen vermieden, und es können auch mehrere <img> -Elemente verarbeitet werden.

// 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>
5
Jason Williams
$(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>
4
CSEngineer