Как получить потомков селектора $ (this)?
У меня есть подобный макет:
<div id = "..."><img src = "..."></div>
и хотели бы использовать селектор jQuery для выбора дочернего img внутри div при нажатии.
Чтобы получить div, у меня есть такой селектор:
$(this)
Как я могу получить дочерний img с помощью селектора?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 19
Попробуйте этот код:
$(this).children()[0]
Я не знаю, лучший ли это подход к текущей ситуации, но если вы хотите пойти по этому пути и по-прежнему получить объект jQuery, просто оберните его таким образом: $($(this).children()[0]).
или еще проще $(this:first-child)
вместо $($(this).children()[x]) используйте $(this).eq(x) или, если хотите первый, просто $(this).first().
@ rémy: Это даже неверный синтаксис. (Потребовалось всего 2 года, чтобы кто-нибудь заметил ...)
Не зная ID DIV, я думаю, вы можете выбрать IMG следующим образом:
$("#"+$(this).attr("id")+" img:first")
это, вероятно, действительно работает, но это своего рода ответ Руба Голдберга :)
и если вы собираетесь использовать этот код, по крайней мере выполните: $ ("#" + this.id + "img: first")
@LocalPCGuy Вы имели в виду: "и если вы собираетесь использовать этот код звать на помощь"
Зачем вам это делать, если this уже выбирает фактический div? Кроме того, если у div нет идентификатора, этот код не будет работать.
Вы также можете использовать
$(this).find('img');
который вернет все img, которые являются потомками div
В общем случае лучше бы $(this).children('img'). например <div><img src = "..." /><div><img src = "..." /></div></div>, потому что предположительно пользователь хочет найти imgs 1-го уровня.
Конструктор jQuery принимает второй параметр под названием context, который можно использовать для переопределения контекста выбора.
jQuery("img", this);
Это то же самое, что использовать .find() следующим образом:
jQuery(this).find("img");
Если нужные вам imgs являются прямыми потомками Только элемента, по которому щелкнули мышью, вы также можете использовать .children():
jQuery(this).children("img");
чего стоит: jQuery ("img", this) внутренне преобразуется в: jQuery (this) .find ("img") Таким образом, второй оказывается немного быстрее. :)
Спасибо @Paul, я волновался, что использование find () было неправильный, оказалось, что это единственный способ;)
Если узел является прямым потомком, не было бы быстрее всего просто выполнить $ (this) .children ('img'); ?
@adamyonk на самом деле нет, по крайней мере, если это что-то, чтобы пройти: jsperf.com/jquery-children-vs-find/3
Я вижу полную противоположность тому, что @PaulIrish заявил в этом примере - jsperf.com/jquery-selectors-comparison-a. Кто-нибудь может пролить свет? Либо я ошибся в тестовом примере, либо jquery изменил эту оптимизацию за последние 4 года.
Ваши тестовые примеры были несправедливыми - вы выполняли $ (bar), когда bar уже был объектом jQuery. Оптимизация тестов дает разные результаты: jsperf.com/jquery-selectors-comparison-a/2
"jQuery (" img ", это);" Это задокументировано в jQuery?
jQuery (селектор, контекст) - это первый пример в документации - api.jquery.com/jquery/#jQuery-selector-context
children() быстрее, чем find(), согласно этому (29 сентября 2014 г.): jsperf.com/jquery-children-vs-find/92Просто запомнить, что find() выходит из строя, а closest() поднимается, и работать будет намного проще :)
Если за вашим тегом DIV сразу следует тег IMG, вы также можете использовать:
$(this).next();
.next () действительно хрупкий, если вы не всегда можете гарантировать, что элемент будет следующим элементом, лучше использовать другой метод. В этом случае IMG является потомком, а не родственником div.
OP явно запросил дочерний img внутри div.
Если вам нужно получить первый img, который опустился ровно на один уровень, вы можете сделать
$(this).children("img:first")
:first соответствует только "вниз ровно на один уровень" или соответствует "первый"img, который был найден?
@IanBoyd, .children() - это источник «ровно на один уровень вниз», а :first - это источник «первого».
@TylerCrompton Что делать, если первый img находится на втором уровне ниже?
@IanBoyd, этот элемент не будет учтен. Это применимо только в том случае, если вы используете .find() вместо .children().
если вы используете: сначала с .find () будьте осторожны, jQuery, кажется, находит всех потомков, а затем возвращает первый элемент, иногда очень дорого
Интересно, могли бы вы сделать $(this).children("div").children("img"), чтобы найти все элементы img внуков с родителями div, которые сами являются потомками $(this) ...
@ButtleButkus В вопросе this уже был ссылкой на <div>, содержащий <img>, однако, если у вас есть несколько уровней тегов для перехода от ссылки, которая у вас была, вы определенно могли бы составить более одного вызова children()
@rakslice Я хотел сказать, что this ссылается на <div>, содержащий <img>, и что этот <div> может иметь дочерние <div> со своими собственными дочерними <img>. <div><img src = "..." /><div class = "inner"><img src = "..." /></div><div class = "inner"><img src = "..." /></div></div>. Кажется, вы ответили на мой вопрос: $(this).children("div").children("img") получит два <img> внутри inner<div>? Это хороший трюк. Спасибо.
Потомки непосредственный - это
$('> .child-class', this)
Этот ответ потенциально вводит в заблуждение, поскольку нет элемента с «дочерним» классом, поэтому он не будет работать.
Вы можете найти все элементы 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>
то вы не можете использовать верхний код, чтобы найти значение 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 или children, как показано выше. Для получения дополнительной информации посетите Дети http://api.jquery.com/children/ и Найдите http://api.jquery.com/find/. См. Пример http://jsfiddle.net/lalitjs/Nx8a6/
each jQuery - это один из вариантов:
<div id = "test">
<img src = "testing.png"/>
<img src = "testing1.png"/>
</div>
$('#test img').each(function(){
console.info($(this).attr('src'));
});
Вы можете использовать Детский Селекор для ссылки на дочерние элементы, доступные в родительском элементе.
$(' > img', this).attr("src");
И ниже показано, если у вас нет ссылки на $(this) и вы хотите ссылаться на img, доступный в div из другой функции.
$('#divid > img').attr("src");
Способы обращения к ребенку в 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 ()
Также это должно работать:
$("#id img")
операция хотела использовать this
Вы можете использовать любой из следующих методов:
1 найти ():
$(this).find('img');
2 детей ():
$(this).children('img');
Вот функциональный код, вы можете его запустить (это простая демонстрация).
Когда вы нажимаете 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.info('Method #1: '+$(this).children('img'));
console.info('Method #2: '+$(this).find('img'));
// Here, i'm selecting the first ocorrence of <IMG>
console.info('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>Надеюсь, это поможет!
$(document).ready(function() {
// When you click the DIV, you take it with "this"
$('#my_div').click(function() {
console.info('Initializing the tests..');
console.info('Method #1: '+$(this).children('img'));
console.info('Method #2: '+$(this).find('img'));
// Here, i'm selecting the first ocorrence of <IMG>
console.info('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 до многих тегов <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() {
Я не знаю, как и где @Alex использует свой фрагмент. Итак, я сделал его максимально безопасным и универсальным. Присоединение события к телу приведет к тому, что событие сработает, даже если div не был в dom во время создания события. Очистка события перед созданием нового предотвращает запуск обработчика более одного раза при запуске события. Необязательно делать это по-моему. Также подойдет простое присоединение события к div.
Спасибо. Я видел это раньше в сценарии, и хотя он работал для того, что задумал программист, когда я пытался использовать его для модального окна, событие по-прежнему создавало несколько модальных окон одним щелчком мыши. Полагаю, я использовал это неправильно, но я закончил использовать event.stopImmediatePropagation() в элементе, чтобы этого не произошло.
Вы могли бы использовать
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(this).find('img');
</script>
Чем это отличается от ответа Филнаша 11 лет назад?
Если ваш img является первым элементом внутри div, попробуйте
$(this.firstChild);
$( "#box" ).click( function() {
let img = $(this.firstChild);
console.info({img});
})<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "box"><img src = "https://picsum.photos/seed/picsum/300/150"></div>С собственным javascript вы можете использовать
если у вас более одного тега изображения, используйте
this.querySelectorAll("img")
если только один тег изображения, то мы
this.querySelector("img")
это будет работать, хотя он возвращает элемент dom, а не объект jq