Як отримати дітей від селектора $ (цього)?


2229

У мене такий макет:

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

і хотів би скористатися селектором jQuery для вибору дитини, що imgзнаходиться в межах divнатискання.

Щоб отримати div, у мене є цей вибір:

$(this)

Як можна отримати дитину imgза допомогою селектора?

Відповіді:


2854

Конструктор jQuery приймає другий параметр, contextякий називається, який може бути використаний для зміни контексту вибору.

jQuery("img", this);

Що таке, як використовувати .find()таке:

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

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

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

575
для чого це варто: jQuery ("img", це) внутрішньо перетворюється на: jQuery (це) .find ("img"). Отже, друге колись таке трохи швидше. :)
Пол Ірландський

24
Дякую @Paul, я хвилювався, що використання find () було неправильним , виявляється, це єдиний спосіб;)
Agos

5
Якщо вузол - це пряма дитина, чи не найшвидше було б просто зробити $ (this) .children ('img'); ?
adamyonk

11
@adamyonk інфакт ні, але не, якщо це щось, щоб піти: jsperf.com/jquery-children-vs-find/3
Simon Stender Boisen

3
Я бачу зовсім протилежне тому, що @PaulIrish вказав у цьому прикладі - jsperf.com/jquery-selectors-comppare-a . Чи може хтось пролити світло? Або я неправильно зрозумів тестовий випадок, або jquery змінив цю оптимізацію протягом останніх 4 років.
Джонатан Ванаско

471

Ви також можете використовувати

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

що повертало б усіх img, хто є нащадкамиdiv


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

137

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

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

6
Чи має :firstвідповідати тільки « вниз рівно на один рівень », або ж вона відповідає «першої» , який був знайдений? img
Ян Бойд

3
@IanBoyd, .children()звідки походить "вниз рівно на один рівень" і :firstзвідки прийшов "перший".
Тайлер Кромптон

3
@IanBoyd, цей елемент не буде враховано. Він застосовуватиметься лише в тому випадку, якщо ви використовуєте .find()замість.children()
Тайлер Кромптон

2
якщо ви користуєтесь: спочатку з .find () будьте обережні, jQuery, здається, знайде всіх нащадків, а потім поверне перший елемент, дуже дорогий іноді
Кларенс Лю

1
@ButtleButkus У запитанні thisвже було посилання на те, <div>що містить <img>, однак, якщо у вас є кілька рівнів тегів, щоб перейти від посилання, яке ви мали, тоді ви точно можете скласти більше, ніж один children()дзвінок
rakslice

76

Якщо ваш тег DIV негайно супроводжується тегом IMG, ви також можете використовувати:

$(this).next();

16
.next () дійсно крихкий, якщо ви завжди можете гарантувати, що елемент буде наступним елементом, краще використовувати інший метод. У цьому випадку ІМГ - це нащадок, а не побратим дива.
LocalPCGuy

ОП явно попросила дитину вписати всередину діла.
Джорджіо Темпеста


41

Ви можете знайти всі елементи img батьківського діва, як нижче

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

Ваш div містить лише один елемент 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>

тоді ви не можете використовувати верхній код, щоб знайти значення alt другого елемента 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 або дітей, як описано вище. Для більш детального відвідування дітей http://api.jquery.com/children/ та знайдіть http://api.jquery.com/find/ . Див. Приклад http://jsfiddle.net/lalitjs/Nx8a6/


35

Способи звернення до дитини в 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

Я б використовував nth-дитину ()
McGuinness

31

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

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

54
це, мабуть, насправді працює, але це ніби відповідь Руба Голдберга :)
Скотт Еверден

8
і якщо ви збираєтесь використовувати цей код, принаймні зробіть: $ ("#" + this.id + "img: first")
LocalPCGuy

10
@LocalPCGuy Ви мали на увазі: "і якщо ви будете використовувати цей код, зателефонуйте на допомогу "
gdoron підтримує Моніку

Навіщо робити це, якщо "це" вже вибирає фактичний div? Крім того, якщо у div немає ідентифікатора, цей код не працює.
Джорджіо Темпеста

31

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

$(this).children()[0]

13
це буде працювати, хоча він повертає елемент dom, а не jq-об'єкт
redsquare

2
Я не знаю , якщо це найкращий підхід до поточної ситуації, але якщо ви хочете йти по цьому шляху і до сих пір в кінцевому підсумку з об'єктом JQuery, просто обернути його таким чином: $($(this).children()[0]).
патрон

19
або ще простіше$(this:first-child)
1111

4
замість $($(this).children()[x])використання $(this).eq(x)або якщо ви хочете перший, просто $(this).first().
Крісті Міхай

16
@ rémy: Це неправдивий синтаксис. (Узяв усі 2 роки, щоб хтось помітив ...)
BoltClock

23

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

1 знайти ():

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

2 дітей ():

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


15

Ви можете використовувати дочірній селектор для посилання на дочірні елементи, доступні у батьків.

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

А нижче - якщо ви не маєте посилання $(this)і хочете, щоб посилання були imgдоступні в межах divіншої функції.

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


8

Ось функціональний код, ви можете запустити його (це проста демонстрація).

Коли ви клацаєте на DIV, ви отримуєте зображення за допомогою різних методів, у цій ситуації "це" є 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>

Сподіваюся, це допомагає!


5

У вас може бути від 0 до багатьох <img>тегів <div>.

Щоб знайти елемент, використовуйте a .find().

Щоб захистити свій код, використовуйте .each().

Використання .find()та .each()разом запобігають нульовим помилкам посилання у випадку 0 <img>елементів, одночасно дозволяючи обробляти декілька <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>


чому ти це зробив? $("body").off("click", "#mydiv").on("click", "#mydiv", function() {
Chris22

Я не знаю, як і де @Alex використовує свій фрагмент. Отже, я зробив це максимально безпечним і загальним. Якщо приєднати подію до тіла, це призведе до запуску події, навіть якщо діва не був у домі під час створення події. Очищення події перед створенням нового запобігає запуску обробника не один раз, коли подія запускається. Не обов’язково робити це по-своєму. Просто приєднати подію до діви також би спрацювало.
Джейсон Вільямс

Дякую. Я бачив це раніше в сценарії, і хоча він працював на те, що програміст задумав, коли я намагався використовувати його для модального вікна, подія все одно створила кілька модалів одним натисканням кнопки. Я здогадуюсь, що я неправильно використовував це, але я завершив використання event.stopImmediatePropagation()елемента, щоб не допустити цього.
Chris22

4

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


0

Ви можете використовувати

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 $(this).find('img');
</script>

Чим це відрізняється від відповіді філанаса 11 років тому?
Девід

0

Якщо ваш img є саме першим елементом всередині div, то спробуйте

$(this.firstChild);

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.