Как получить дочерние элементы селектора $ (this)?


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", this) внутренне преобразуется в: jQuery (this) .find ("img"), так что второй намного быстрее. :)
Пол Ирландский

24
Спасибо @Paul, я волновался, что использование find () было неправильным , оказывается, что это единственный выход;)
Agos

5
Если узел является прямым потомком, не будет ли быстрее всего сделать $ (this) .children ('img'); ?
adamyonk

11
@adamyonk нет, по крайней мере, если это что-то сделать: jsperf.com/jquery-children-vs-find/3
Саймон Стендер Боизен

3
Я вижу полную противоположность тому, что @PaulIrish заявил в этом примере - jsperf.com/jquery-selectors-comparison-a . Кто-нибудь может пролить свет? Либо я ошибся в тестовом примере, либо jquery изменил эту оптимизацию за последние 4 года.
Джонатан Ванаско

471

Вы также можете использовать

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

который вернул бы все imgs, которые являются потомкамиdiv


В общем случае кажется, что $(this).children('img')было бы лучше. например, <div><img src="..." /><div><img src="..." /></div></div>потому что предположительно пользователь хочет найти imgs 1-го уровня.
Баттл Буткус

137

Если вам нужно получить первый уровень imgниже ровно на один уровень, вы можете сделать

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

6
Имеет ли :firstсоответствовать только « вниз ровно на один уровень », или же она соответствует «первой» , который был найден? img
Ян Бойд

3
@IanBoyd, .children()откуда происходит «вниз ровно на один уровень» и :firstоткуда «первый».
Тайлер Кромптон

3
@IanBoyd, этот элемент будет пропущен. Это будет применяться только если вы используете .find()вместо.children()
Тайлер Кромптон

2
если вы используете: сначала с .find () будьте осторожны, jQuery, похоже, находит всех потомков, а затем возвращает первый элемент, иногда очень дорогой
Clarence Liu

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

76

Если за вашим тегом DIV сразу же следует тег IMG, вы также можете использовать:

$(this).next();

16
.next () действительно хрупкий, если вы не всегда можете гарантировать, что элемент будет следующим элементом, лучше использовать другой метод. В этом случае IMG является потомком, а не родным братом div.
LocalPCGuy

ОП явно просил ребенка img внутри div.
Джорджио Темпеста,


41

Вы можете найти все элементы img родительского 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

Ваш 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>

тогда вы не можете использовать верхний код для поиска альтернативного значения второго элемента 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/


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-child ()
McGuinness

31

Не зная ID DIV, я думаю, вы можете выбрать IMG следующим образом:

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

54
это, вероятно, на самом деле работает, но это своего рода ответ Рубе Голдберга :)
Скотт Эверден

8
и если вы собираетесь использовать этот код, по крайней мере, выполните: $ ("#" + this.id + "img: first")
LocalPCGuy

10
@LocalPCGuy Вы имели в виду: «и если вы собираетесь использовать этот код, зовите на помощь »
gdoron поддерживает Monica

Зачем вам это делать, если «this» уже выбирает фактический div? Кроме того, если у div нет идентификатора, этот код не будет работать.
Джорджио Темпеста,

31

Попробуйте этот код:

$(this).children()[0]

13
это будет работать, хотя он возвращает элемент dom, а не объект
jq

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

19
или даже проще$(this:first-child)
Реми

4
вместо того, чтобы $($(this).children()[x])использовать $(this).eq(x)или, если вы хотите первый, просто $(this).first().
Кристи Михай

16
@ Реми: Это даже не правильный синтаксис. (Потребовалось все 2 года, чтобы кто-нибудь заметил ...)
BoltClock

23

Вы можете использовать любой из следующих методов:

1 найти ():

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

2 детей ():

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

21

JQuery's eachявляется одним из вариантов:

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

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

15

Вы можете использовать Child Selecor для ссылки на дочерние элементы, доступные в родительском элементе .

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

И ниже, если у вас нет ссылки на $(this)и вы хотите сделать ссылку imgдоступной в divдругой функции.

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


8

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

Когда вы щелкаете по DIV, вы получаете изображение несколькими различными способами, в этом случае «this» - это 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>.

Чтобы найти элемент, используйте .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 использует его фрагмент. Итак, я сделал это максимально безопасным и общим. Прикрепление события к телу сделает это так, что событие сработает, даже если div не было в dom во время создания события. Очистка события перед созданием нового препятствует запуску обработчика более одного раза, когда событие инициируется. Не нужно делать это по-своему. Простое присоединение события к div также будет работать.
Джейсон Уильямс

Спасибо. Я видел это раньше в скрипте, и хотя он работал для того, что задумал программист, когда я попытался использовать его для модального окна, событие все же создало несколько модальных за один клик. Я думаю, что я использовал это неправильно, но я использовал 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>

Чем это отличается от ответа philnash 11 лет назад?
Дэвид

0

Если ваш img точно первый элемент внутри div, попробуйте

$(this.firstChild);

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.