Mam układ podobny do tego:

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

I chciałbym użyć selektora jQuery, aby wybrać dziecko img wewnątrz div na kliknięcie.

Aby uzyskać div, mam ten selektor:

$(this)

Jak mogę uzyskać dziecko img za pomocą selektora?

2271
Alex 20 listopad 2008, 22:44

17 odpowiedzi

Najlepsza odpowiedź

Konstruktor jQuery akceptuje drugiego parametru o nazwie {x0}} który może być używane do zastąpienia kontekstu wyboru.

jQuery("img", this);

Który jest taki sam jak przy użyciu .find() Lubię to:

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

Jeśli pragniesz IMG, są tylko bezpośrednich potomków klikniętego elementu, można również użyć {{ X0}}:

jQuery(this).children("img");
2887
gnarf 25 czerwiec 2014, 20:45

Możesz również użyć

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

Który zwróci wszystkie img s, które są potomkami div

475
philnash 20 listopad 2008, 21:23

Jeśli chcesz uzyskać pierwszy img, to jest dokładnie jeden poziom, możesz to zrobić

$(this).children("img:first")
138
rakslice 21 lipiec 2011, 18:47

Jeśli twój znacznik DIV jest natychmiastowy, a następnie znacznik IMG, możesz również użyć:

$(this).next();
76
Book Of Zeus 27 listopad 2011, 00:03

Dzieci bezpośredni

$('> .child-class', this)
70
isherwood 19 grudzień 2019, 18:29

Możesz znaleźć wszystkie elementy IMG rodzica div, jak poniżej

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

Jeśli chcesz konkretny element IMG, możesz napisać do tego

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

Twój div zawiera tylko jeden element IMG. Więc dla tego poniżej ma rację

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

Ale jeśli twój div zawiera więcej elementu IMG jak poniżej

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

Następnie nie możesz użyć górnego kodu, aby znaleźć wartość Alt drugiego elementu IMG. Więc możesz spróbować tego:

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

Ten przykład pokazuje ogólny pomysł, w jaki sposób możesz znaleźć rzeczywisty obiekt w obiekcie nadrzędnym. Możesz używać klas, aby odróżnić obiekt dziecka. To jest łatwe i zabawne. to znaczy

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

Możesz to zrobić jak poniżej:

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

I bardziej szczegółowe jak:

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

Możesz użyć znajomych lub dzieci jak powyżej kodu. Aby uzyskać więcej odwiedzić dzieci http://api.jquery.com/children/ i znajdź http://api.jquery.com/find/ . Patrz przykład http://jsfiddle.net/lalitjs/nx8A6/

41
Lalit Kumar Maurya 4 grudzień 2013, 04:59

Możesz użyć

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 $(this).find('img');
</script>
-1
Hassan Fayyaz 19 wrzesień 2019, 07:18

Sposoby odnoszące się do dziecka w jQuery. Podsumowałem go w następujących jQuery:

$(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
35
Oskar 25 styczeń 2015, 13:25

Nie wiedząc, że identyfikator Div myślę, że możesz wybrać podobny img:

$("#"+$(this).attr("id")+" img:first")
31
Adam 20 listopad 2008, 19:56

Wypróbuj ten kod:

$(this).children()[0]
31
BoltClock 17 czerwiec 2013, 18:40

Możesz użyć jednej z następujących metod:

1 Znajdź ():

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

2 dzieci ():

$(this).children('img');
23
ann 21 sierpień 2015, 06:36

JQuery's each jest jedną opcją:

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

$('#test img').each(function(){
    console.log($(this).attr('src'));
});
21
Thirumalai murugan 23 czerwiec 2014, 07:11

Możesz użyć selektor dziecka do odniesienia elementów dziecka dostępnych w rodzicach.

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

A poniżej jest, jeśli nie masz odniesienia do $(this) i chcesz odnieść się do img w div z innej funkcji.

 $('#divid > img').attr("src");
15
Dennis R 25 lipiec 2014, 21:56

Również to powinno działać:

$("#id img")
12
Nilesh Thakkar 21 sierpień 2015, 06:22

Oto kod funkcjonalny, możesz go uruchomić (to prosta demonstracja).

Po kliknięciu div otrzymasz obraz z różnych metod, w tej sytuacji "To" jest 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>

Mam nadzieję, że to pomoże!

8
RPichioli 9 październik 2017, 13:12

Możesz mieć znaczniki 0 do wielu {x0}} wewnątrz swojego {x1}}.

Aby znaleźć element, użyj .find().

Aby bezpiecznie zachować kod, użyj .each().

Używanie .find() i .each() Razem uniemożliwia błędy referencyjne zerowe w przypadku elementów 0 {x2}}, a także umożliwiając obsługę wielu elementów <img>.

// 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 11 wrzesień 2017, 20:01
$(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
Sumit Lahiri 5 marzec 2017, 13:27