Pytanie Jak zdobyć dzieci z selektora $ (this)?


Mam układ podobny do tego:

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

i chciałbym użyć selektora jQuery, aby wybrać dziecko img w środku div na kliknięcie.

Aby uzyskać divMam ten selektor:

$(this)

Jak mogę zdobyć dziecko img używając selektora?


2046
2017-11-20 19:44


pochodzenie




Odpowiedzi:


Konstruktor jQuery akceptuje drugi parametr o nazwie context które mogą być użyte do zastąpienia kontekstu selekcji.

jQuery("img", this);

Który jest taki sam jak użycie .find() lubię to:

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

Jeśli pragniesz imgów tylko bezpośredni potomkowie klikniętego elementu, możesz również użyć .children():

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

2690
2017-11-20 21:27



za to, co jest warte: jQuery ("img", to) jest wewnętrznie konwertowane na: jQuery (this) .find ("img") Tak więc drugie jest trochę szybsze. :) - Paul Irish
Dzięki @Paul, martwiłem się, że używanie find () było źle, okazuje się, że to jedyny sposób;) - Agos
Jeśli węzeł jest bezpośrednim potomkiem, czy nie byłoby najszybszym po prostu zrobić $ (this) .children ('img'); ? - adamyonk
@adamyonk w rzeczywistości nie, przynajmniej nie, jeśli to cokolwiek: jsperf.com/jquery-children-vs-find/3 - Simon Stender Boisen
Widzę dokładne przeciwieństwo tego, co @PaulIrish stwierdził w tym przykładzie - jsperf.com/jquery-selectors-comparison-a   . Czy ktoś może rzucić nieco światła? Albo źle wpisałem przypadek testowy, albo jquery zmienił tę optymalizację w ciągu ostatnich 4 lat. - Jonathan Vanasco


Możesz również użyć

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

które zwrócą wszystko imgs są potomkami div


445
2017-11-20 21:23



W ogólnych przypadkach wydaje się, że $(this).children('img') byłoby lepiej. na przykład <div><img src="..." /><div><img src="..." /></div></div> ponieważ prawdopodobnie użytkownik chce znaleźć imgi pierwszego poziomu. - Buttle Butkus


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

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

127
2017-07-21 18:47



Robi :first pasuje tylko "dokładnie jeden poziom"lub pasuje "pierwszy"  img to zostało znalezione? - Ian Boyd
@IanBoyd, .children() to skąd pochodzi "dół dokładnie jeden poziom" i :firstto skąd pochodzi "pierwszy". - Tyler Crompton
@IanBoyd, ten element byłby niezauważony. Miałoby to zastosowanie tylko, jeśli używasz .find() zamiast .children() - Tyler Crompton
jeśli używasz: najpierw z .find () bądź ostrożny, jQuery wydaje się znajdować wszystkich potomków, a następnie zwraca pierwszy element, czasami bardzo drogi - Clarence Liu
@ButtleButkus W pytaniu this było już odniesienie do <div> zawierające <img>, jednak jeśli masz wiele poziomów znacznika do przemierzania referencji, które miałeś wtedy na pewno mógłbyś zdecydowanie skomponować więcej niż jeden children() połączenie - rakslice


Jeśli po tagu DIV natychmiast następuje tag IMG, możesz również użyć:

$(this).next();

70
2018-06-21 13:25



.next () jest naprawdę kruchy, chyba że zawsze możesz zagwarantować, że element będzie następnym elementem, lepiej użyć innej metody. W tym przypadku IMG jest potomkiem, a nie rodzeństwem div. - LocalPCGuy
PO wyraźnie zażądał umieszczenia dziecka wewnątrz div. - Giorgio Tempesta


The bezpośredni dzieci są

$('> .child', this)

56
2017-07-16 20:07



Ta odpowiedź jest potencjalnie myląca, ponieważ nie ma elementu z klasą "dziecko", więc nie będzie działać. - Giorgio Tempesta


Możesz znaleźć wszystkie elementy img div rodziców, jak poniżej

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

Jeśli chcesz konkretny element img, możesz napisać w ten sposób

$(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. Tak więc poniżej jest słuszne

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

Ale jeśli twój div zawiera więcej elementów img, jak poniżej

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

wtedy nie możesz użyć górnego kodu, aby znaleźć wartość alt drugiego elementu img. 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ólną ideę, w jaki sposób można znaleźć rzeczywisty obiekt w obiekcie nadrzędnym. Za pomocą klas można rozróżnić obiekt podrzędny. To jest łatwe i przyjemne. 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ółowo:

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

Możesz użyć find lub children jak powyższy kod. Aby uzyskać więcej odwiedzin dzieci http://api.jquery.com/children/ i znajdź http://api.jquery.com/find/. Zobacz przykład http://jsfiddle.net/lalitjs/Nx8a6/


37
2018-03-22 08:05





Nie znając identyfikatora DIV, myślę, że można wybrać IMG w następujący sposób:

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

29
2017-11-20 19:56



to prawdopodobnie działa, ale jest to odpowiedź Rube Goldberg :) - Scott Evernden
i jeśli zamierzasz używać tego kodu, przynajmniej wykonaj: $ ("#" + this.id + "img: first") - LocalPCGuy
@LocalPCGuy Masz na myśli: "i jeśli zamierzasz używać tego kodu Zadzwoń po pomoc" - gdoron
Dlaczego miałbyś to zrobić, jeśli "to" już wybiera rzeczywisty div? Poza tym, jeśli div nie ma id, ten kod nie zadziała. - Giorgio Tempesta