Питання Як отримати дітей з $ (це) селектора?


У мене є макет, подібний до цього:

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

і хочеш використовувати селектор jQuery для вибору дитини img всередині div на клацання

Щоб отримати div, У мене є цей селектор:

$(this)

Як я можу отримати дитину? img використовуючи селектор?


2046
2017-11-20 19:44


походження




Відповіді:


Конструктор jQuery приймає 2-й параметр з назвою context який може бути використаний для перевизначення контексту вибору.

jQuery("img", this);

Це те ж саме, що і використання .find() подобається це:

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

Якщо вам потрібні IMGS тільки прямі нащадки натиснутого елемента, ви також можете використовувати .children():

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

2690
2017-11-20 21:27



для чого це коштує: jQuery ("img", це) внутрішньо перетворено на: jQuery (це) .find ("img") Отже, друге це так трохи швидше. :) - Paul Irish
Спасибі @ Паулю, я був стурбований тим, що за допомогою find () було неправильно, виявляється, це єдиний спосіб;) - Agos
Якщо вузол є прямим дитиною, чи не буде найшвидшим, щоб просто зробити $ (this). Children ('img'); ? - adamyonk
@adamyonk infact не, atleast не, якщо це щось піде: jsperf.com/jquery-children-vs-find/3 - Simon Stender Boisen
Я бачу точно протилежне тому, що сказав в цьому прикладі @PaulIrish - jsperf.com/jquery-selectors-comparison-a   . Чи можна пролити світло? Я теж не отримав тестовий приклад, або jquery змінила цю оптимізацію за останні 4 роки. - Jonathan Vanasco


Ви могли б також використовувати

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

який би повернув все imgякі є нащадками div


445
2017-11-20 21:23



У загальних випадках це виглядає як $(this).children('img') було б краще. наприклад, <div><img src="..." /><div><img src="..." /></div></div> тому що, мабуть, користувач хоче знайти імген 1-го рівня. - Buttle Butkus


Якщо вам потрібно отримати перший img це рівно один рівень, можна зробити

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

127
2017-07-21 18:47



Чи :first тільки матч "вниз точно один рівень", або він збігається в "перший"  img що було знайдено? - Ian Boyd
@IanBoyd .children() це місце, де "вниз точно один рівень" походить від і :first є де "перший" прийшов з. - Tyler Crompton
@IanBoyd, цей елемент буде невраховано. Це буде застосовуватися лише у випадку використання .find() замість .children() - Tyler Crompton
якщо ви використовуєте: спочатку використовуйте .find (), будьте обережні, jQuery, здається, знаходить всіх нащадків, а потім повертає перший елемент, іноді дуже дорогий - Clarence Liu
@ButtleButkus У питанні this вже була посиланням на <div> що містить <img>, однак, якщо у вас є декілька рівнів тегів, щоб перейти від посилання, то ви, безумовно, могли б точно скласти більше одного children() дзвонити - rakslice


Якщо за тегом DIV одразу ж належить тег IMG, ви також можете використовувати:

$(this).next();

70
2018-06-21 13:25



. next () дійсно тендітний, якщо ви завжди можете гарантувати, що елемент буде наступним елементом, краще використовувати інший метод. У цьому випадку, IMG є нащадком, а не братом, від div. - LocalPCGuy
ОП явно звернувся до дитини img в розділі div. - Giorgio Tempesta


The прямий діти є

$('> .child', this)

56
2017-07-16 20:07



Ця відповідь потенційно вводить в оману, оскільки не існує елемента з класом "дитина", тому він не буде працювати. - Giorgio Tempesta


Ви можете знайти весь елемент img parent div, як показано нижче

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

Якщо вам потрібен конкретний елемент img, ви можете написати так

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

Ваш розділ містить лише один елемент img. Тож для цього нижче правильно

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

Але якщо ваш div містить більше img елемента, як показано нижче

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

то ви не можете використовувати верхній код, щоб знайти альт значення другого елемента img. Отже, ви можете спробувати це:

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

Цей приклад показує загальне уявлення про те, як можна знайти фактичний об'єкт у батьківському об'єкті. Ви можете використовувати класи, щоб відрізнити ваш дочірній об'єкт. Це легко і весело. тобто

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

Ви можете зробити це, як показано нижче:

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

і більш конкретними, як:

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

Ви можете використовувати find або children як вказаний вище код. Для більше відвідування дітей http://api.jquery.com/children/ і знайти http://api.jquery.com/find/. Див. Приклад http://jsfiddle.net/lalitjs/Nx8a6/


37
2018-03-22 08:05





Не знаючи ідентифікатора DIV, я думаю, що ви можете вибрати IMG так:

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

29
2017-11-20 19:56



це, напевно, дійсно працює, але це цікава відповідь Рубе Голдберга :) - Scott Evernden
і якщо ви збираєтеся використовувати цей код, принаймні: $ ("#" + this.id + "img: first") - LocalPCGuy
@LocalPCGuy Ви мали на увазі: "і якщо ви збираєтеся використовувати цей код зателефонуйте до допомоги" - gdoron
Чому б ви це робили, якщо "це" вже вибирає фактичний розділ? Крім того, якщо div не має ідентифікатора, цей код не буде працювати. - Giorgio Tempesta


Способи звернення до дитини в jQuery. Я підвів його у наступному 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

28
2018-01-25 10:51





Спробуйте цей код:

$(this).children()[0]

27
2017-11-20 19:51



що буде працювати, хоча він повертає елемент dom, а не jq-об'єкт - redsquare
Я не знаю, чи це найкращий підхід до поточної ситуації, але якщо ви хочете піти на цей маршрут і все одно в кінцевому підсумку з об'єктом jQuery, просто оберніть його таким чином: $($(this).children()[0]). - patridge
або навіть простіше $(this:first-child) - rémy
замість $($(this).children()[x]) використовувати $(this).eq(x) або якщо ви хочете першого, просто $(this).first(). - Cristi Mihai
@ rйmy: Це навіть недійсний синтаксис. (Прийнято всього 2 роки, щоб хтось помітив ...) - BoltClock♦


Ви можете використовувати будь-який з наступних методів:

1 знайти (): 

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

2 дітей (): 

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

19
2017-08-14 11:29





jQuery's each є одним з варіантів:

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

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

17
2018-06-26 07:42