Как показать содержимое дочернего элемента в jQuery?
Я хочу показать / утешить детский контент $(this). Смотрите ниже коды:
<div id = "thumb-2" class = "thumb">
<span id = "info-2" class = "blurb">More Info</span>
</div>
<div id = "thumb-3" class = "thumb">
<span id = "info-3" class = "blurb">Atlast</span>
</div>
<script>
$(document).ready(function(){
$(this).click(function(){
console.info($(this).children('.blurb').text());
});
});
</script>
Но в консоли ничего не показывает.
Вывод будет:
- When I click div with id 'thumb-2', it will console as 'More Info'
- When I click div id with 'thumb-3', it will console as 'Atlast'
Ответы 3
Вы не передаете родительский элемент управления в jQuery.
Используйте связанный класс thumb для поиска дочерних элементов.
$(function() {
$('.thumb').click(function() {
console.info($(this).children('.blurb').text());
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "thumb-2" class = "thumb">
<span id = "info-2" class = "blurb">More Info</span>
</div>
<div id = "thumb-3" class = "thumb">
<span id = "info-3" class = "blurb">Atlast</span>
</div> $(document).ready(function(){
$(this).click(function(e){
let target = $(e.target);
console.info(target.children('.blurb').text());
});
});Измените свой код, как показано выше, и вы получите желаемый результат. В вашем случае $(this) имеет контекст, связанный с объектом документа. Метод Children() возвращает всех прямых дочерних элементов выбранного элемента. Единственными прямыми дочерними элементами документа является html. html не имеет установленного класса аннотации. Таким образом, вы получаете undefined. Существует еще один метод, называемый find(), чтобы противостоять этой проблеме. Find пересекается со всеми вложенными дочерними элементами выделения. Но вы привязали событие click ко всему документу, поэтому он будет выводить текстовое содержимое обоих элементов .blurb . Как показано в моем фрагменте кода выше, вы можете зафиксировать цель события клика. Если у него есть прямые дочерние элементы с именем blurb, извлеките текстовый узел.
Вы можете попробовать код ниже
$(document).on('click', '.thumb', function(){
var thumb = $(this);
console.info(thumb.children('.blurb').text())
//console.info(thumb.find('.blurb').text()) //another way
})