Soru $ (Bu) Seçici'nin Çocuklarını Nasıl Alabilirsiniz?


Buna benzer bir düzenim var:

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

ve çocuğu seçmek için jQuery seçici kullanmak ister img içinde div tıklamada.

Almak için divBu seçiciyi aldım:

$(this)

Çocuğu nasıl alabilirim img seçici kullanıyor musunuz?


2046
2017-11-20 19:44


Menşei




Cevaplar:


JQuery kurucusu, ikinci bir parametre kabul eder context Seçimin bağlamını geçersiz kılmak için kullanılabilir.

jQuery("img", this);

Kullanmakla aynı olan .find() bunun gibi:

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

Eğer arzu ettiğiniz bir tek Tıklanan elemanın doğrudan torunları, ayrıca kullanabilirsiniz .children():

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

2690
2017-11-20 21:27



Bunun ne için olduğunu: jQuery ("img", bu) dahili olarak dönüştürülür: jQuery (this) .find ("img") Yani ikinci hiç bu kadar az hızlı. :) - Paul Irish
Teşekkürler @Paul, find () kullanarak olduğunu endişelendim yanlış, tek yolu bu çıkıyor;) - Agos
Düğüm doğrudan bir çocuksa, sadece bunu yapmak için en hızlı olmaz mı? (Bu) .children ('img'); ? - adamyonk
@adamyonk infact değil, atleast bu bir şey olup olmadığını değil: jsperf.com/jquery-children-vs-find/3 - Simon Stender Boisen
Bu örnekte @PaulIrish'in söylediklerinin tam tersini görüyorum - jsperf.com/jquery-selectors-comparison-a   . Birileri ışık tutabilir mi? Ya test vakasını yanlış anladım, ya da jquery bu optimizasyonu son 4 yılda değiştirdi. - Jonathan Vanasco


Ayrıca kullanabilirsiniz

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

hepsi geri dönecek imgonların torunları div


445
2017-11-20 21:23



Genel durumlarda, gibi görünüyor $(this).children('img') Daha iyi olurdu. Örneğin. <div><img src="..." /><div><img src="..." /></div></div> çünkü muhtemelen kullanıcı 1 seviyeli hataları bulmak istiyor. - Buttle Butkus


İlkini almanız gerekiyorsa img tam olarak bir seviye aşağı, yapabilirsin

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

127
2017-07-21 18:47



does :first sadece maç "tam olarak bir seviye aşağı"veya eşleşiyor "ilk"  img bulundu mu? - Ian Boyd
@IanBoyd, .children() "tam olarak bir seviye aşağı" dan geliyor ve :first "ilk" in nereden geldiğini. - Tyler Crompton
@IanBoyd, bu öğe için açıklanamayacaktı. Sadece kullanırsanız geçerli olur .find() yerine .children() - Tyler Crompton
Eğer kullanıyorsanız: ilk bir .find () ile dikkatli olun, jQuery tüm torunları bulmak ve sonra ilk elemanı, çok pahalı bazen dönmek gibi görünüyor - Clarence Liu
@ButtleButkus Soruda, this zaten bir referans oldu <div> içeren <img>Ancak, referanstan geçiş yapmak için birden fazla etiket düzeyine sahipseniz, o zaman kesinlikle kesinlikle birden fazla yazabilirsiniz. children() aramak - rakslice


DIV etiketiniz hemen IMG etiketiyle takip ediliyorsa, şunları da kullanabilirsiniz:

$(this).next();

70
2018-06-21 13:25



.next () gerçekten kırılgandır, aksi halde öğenin bir sonraki öğe olacağını garanti edemezseniz, farklı bir yöntem kullanmak daha iyidir. Bu durumda, IMG div'ın bir soyundan değil, bir kardeşidir. - LocalPCGuy
OP açıkça bir çocuğun div içinde imgini istemiştir. - Giorgio Tempesta


direkt çocuklar

$('> .child', this)

56
2017-07-16 20:07



Bu cevap potansiyel olarak yanıltıcıdır çünkü 'çocuk' sınıfına sahip bir öğe yoktur, bu yüzden işe yaramaz. - Giorgio Tempesta


Aşağıdaki gibi ebeveyin tüm img elemanlarını bulabilirsiniz

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

Eğer belirli bir img elemanını istiyorsanız, bu şekilde yazabilirsiniz.

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

Senin div sadece bir tane img elemanı içerir. Yani bunun için aşağı doğru

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

Ama eğer divunuz aşağıda olduğu gibi daha fazla img öğesi içeriyorsa

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

Daha sonra ikinci img öğesinin alt değerini bulmak için üst kodu kullanamazsınız. Yani bunu deneyebilirsiniz:

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

Bu örnek, ana nesneyi ana nesne içinde nasıl bulabileceğiniz hakkında genel bir fikir vermektedir. Çocuk nesnesini ayırt etmek için sınıfları kullanabilirsiniz. Bu kolay ve eğlenceli. diğer bir deyişle

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

Bunu aşağıdaki gibi yapabilirsiniz:

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

ve daha spesifik olarak:

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

Yukarıdaki kodları yukarıdaki gibi kullanabilirsiniz. Daha fazla ziyaret için Çocuklar http://api.jquery.com/children/ ve bul http://api.jquery.com/find/. Örneğe bakın http://jsfiddle.net/lalitjs/Nx8a6/


37
2018-03-22 08:05





DIV kimliğini bilmeden, IMG'yi şöyle seçebileceğinizi düşünüyorum:

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

29
2017-11-20 19:56



Bu muhtemelen işe yarıyor ama bu Rube Goldberg cevabı gibi :) - Scott Evernden
ve eğer bu kodu kullanacaksanız, en azından şunu yapın: $ ("#" + this.id + "img: first") - LocalPCGuy
@LocalPCGuy Demek istediğin: "ve eğer bu kodu kullanacaksan yardım için ara" - gdoron
'Bu' zaten gerçek div seçtiyse neden bunu yapardınız? Ayrıca, div bir kimlik yoksa bu kod çalışmayacak. - Giorgio Tempesta


JQuery'deki bir çocuğa başvurma yolları. Bunu aşağıdaki jQuery'de özetledim:

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

28
2018-01-25 10:51





Bu kodu deneyin:

$(this).children()[0]

27
2017-11-20 19:51



jq nesnesi değil dom elemanı döndürse de çalışırdı - redsquare
Mevcut durum için en iyi yaklaşım olup olmadığını bilmiyorum, ancak bu rotaya gitmek istiyorsanız ve yine de jQuery nesnesiyle sonuçlanmak istiyorsanız, sadece şu şekilde sarın: $($(this).children()[0]). - patridge
veya daha kolay $(this:first-child) - rémy
yerine $($(this).children()[x]) kullanım $(this).eq(x) ya da ilkini istersen, sadece $(this).first(). - Cristi Mihai
@ rémy: Bu geçerli bir sözdizimi bile değil. (Herkesin fark etmesi için 2 yıl sürdü ...) - BoltClock♦


Aşağıdaki yöntemlerden birini kullanabilirsiniz:

1 bul (): 

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

2 çocuk (): 

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

19
2017-08-14 11:29