Question

我正在尝试使用jQuery选择div元素，但是，对我而言，我一直无法弄清楚如何使其工作。我试图对其进行设置，以便当用户单击类为span的{{1}}元素时，它会找到类为remove div元素>

此代码块是在页面加载完成后动态添加的：

class-i-want-to-select

这是我尝试使用的代码：

<div class="container">
   <div>
      <span style="float:left;">some text</span>
      <span class="remove" style="float:right;">[X]</span> ///user clicks here
   </div>
   <div style="clear:both;"></div>
   <div class="class-i-want-to-select"></div> ///want to select this element
</div>

我认为上面的代码可以正确选择我尝试选择的元素，但是它不起作用。难道我做错了什么？由于我正在遍历的代码块是动态添加的，因此我需要选择其他方式吗？

Answer 1

您的跨度也包装在div中。因此，最接近的将找到该div而不是带有类容器的div。而且该div没有要选择的班级的子级。因此，请尝试使用.closest( '.container' )。

Answer 2

尝试一下：您正在尝试获取最接近的div，然后找到不会给您父级div为类class-i...的类您只需要将类选择器.container放在closest中，它将返回正确的父div，然后对其调用find以获得class-i-want-to-select。检查以下代码

$(document).on('click', '.remove', function () {
    var $parent = $(this).closest('div.container');
    var that = $parent.find('div.class-i-want-to-select');
    console.log(that);
});

Answer 3

尝试一下-

$('.remove').on('click', function () {
    var that = $(this).parent().parent().find('.class-i-want-to-select');
    console.log(that);
});

Answer 4

另一种方法是使用parents()而不是将一个容器div作为其选择器：

$('body').on('click', '.remove', function () {
    var that = $(this).parents('.container').find('.class-i-want-to-select');
    console.log(that.text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div>
      <span style="float:left;">some text</span>
      <span class="remove" style="float:right;">[X]</span> ///user clicks here
   </div>
   <div style="clear:both;"></div>
   <div class="class-i-want-to-select">I am the one you want!</div> ///want to select this element
</div>

使用jQuery选择具有特定类的元素的正确方法是什么

4 个答案: