使用jQuery选择具有特定类的元素的正确方法是什么[重复]答案

【问题标题】：What is the correct way to select an element with a specific a class using jQuery [duplicate]使用jQuery选择具有特定类的元素的正确方法是什么[重复]
【发布时间】：2018-07-30 22:27:09
【问题描述】：

我正在尝试使用 jQuery 来选择一个 div 元素，但是，对于我来说，我无法弄清楚如何让它工作。我正在尝试对其进行设置，以便当用户单击类 remove 的 span 元素时，它会找到类 class-i-want-to-select 最接近的 div 元素

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

<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);
});

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

【问题讨论】：

问题在于.closest('div')，它选择了一个不包含您要查找的元素的div。请改用.closest('.container')。
添加类或唯一 ID 以删除按钮数据集。

标签： javascript jquery dom-traversal

【解决方案1】：

试试这个：你试图获得最接近的 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);
});

【讨论】：

【解决方案2】：

您的跨度也包含在一个 div 中。所以最近会找到那个 div 而不是带有类容器的 div。并且那个 div 没有我想选择的类的孩子。所以尝试使用.closest( '.container' )。

【讨论】：

【解决方案3】：

试试这个-

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

【讨论】：

这适用于给定的 html，但是像这样将多个 .parent() 调用链接在一起并不是一个好习惯。它将 js 与确切的 HTML 结构联系得太紧；页面布局中的任何细微更改最终都会破坏脚本。
接受。我只是试图给出其他人给出的替代答案。

【解决方案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>

【讨论】：