Question

我有一个以HTML格式呈现的video objects列表

   <div class="video">
        <p class='title'> {{ video.title }} </p>
        <p class='url'> {{ video.url }} </p> 
        <button class="btn btn-primary queue" href="#">queue</button>
    </div>
    <br />

我想要什么？

每当我点击任何视频列表时，都应该选择标题和网址

我有jQuery

$(function(){
    $('body').on('click', '.video', function(event) {
        var title = $(this).closest('.title');
        console.log(title);
        alert(title);
    });
});

当我在萤火虫中看到console.log(title)为jQuery( )在萤火虫中时，我做错了什么？

Answer 1

.closest()上升到父链。如果要搜索子对象，请使用.find()。您的代码也使您看起来想要div的内容，而不是jQuery对象。结合这些变化，你会得到这个：

$(function(){
    $('body').on('click', '.video', function(event) {
        var title = $(this).find('.title').html();
        console.log(title);
        alert(title);
    });
});

Answer 2

$(function(){
  $('body').on('click', '.video', function(event) {
    var title = $(this).find('.title').html();
    console.log(title);
    alert(title);
  });
});

Answer 3

.closest('.title')将上升到DOM层次结构，直到找到与选择器匹配的元素。然后它将返回该选择器的jQuery对象。

您要做的是遍历DOM层次结构，例如使用children方法（搜索直接子项）或find方法（搜索子项的子项），然后使用text或其HTML内容检索文本{ {3}}方法（而不是获取jQuery对象）：

var title = $(this).children('.title').text();

jQuery：如何在div中选择元素？

3 个答案: