使用 jQuery select 具有特定 a class 的元素的正确方法是什么

Question

我正在尝试使用 jQuery 到 select 一个 div 元素，但是，对于我来说，我无法弄清楚如何让它工作。我正在尝试设置它，以便当用户单击带有 class remove 的 span 元素时，它会找到最近的带有 class 的 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>

这是我尝试使用的代码：

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

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

Answer 1

您的跨度也包含在 div 中。所以最近会发现 div 而不是 div 和 class 容器。 div 没有 class-i-want-to-select 的 child。所以尝试使用 .closest( '.container' ).

Answer 2

试试这个：你正在尝试最接近 div 然后找到 class 这不会给你父 div 有 class class-i... 您只需要将 class 选择器 .container 放在 closest 中，它将 return 正确的父 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 select 具有特定 a class 的元素的正确方法是什么

What is the correct way to select an element with a specific a class using jQuery

javascript

jquery

dom-traversal