JQuery：如何使用类选择器找到最近的元素？ [复制]

Posted 2023-05-09

【中文标题】JQuery：如何使用类选择器找到最近的元素？ [复制]

【英文标题】：JQuery: how to find the closest element using the class selector? [duplicate]

【发布时间】：2021-02-05 08:19:33

【问题描述】：

我正在使用 html 和 JQuery（以及 AngularJS）开发应用程序。我是使用 JQuery 的新手并且有一个问题。假设我有这个 HTML 文件：

    <div class="my_class">1</div>
    <p ng-click="my_method()">MY FIRST PARAGRAPH</p>
    <div class="my_class">2</div>
    <p ng-click="my_method()">MY SECOND PARAGRAPH</p>
    <div class="my_class">3</div>
    <p ng-click="my_method()">MY THIRD PARAGRAPH</p>
    <div class="my_class">4</div>
    <p ng-click="my_method()">MY FOURTH PARAGRAPH</p>
    <div class="another_class">something in here..</div>
    <div class="my_class">5</div>

如果在my_method() 方法中我想使用JQuery 代码动态更改与my_class 类关联的SINGLE <div> 元素的样式我不知道该怎么做它。 我知道以下代码：

$(".my_class")

将选择与my_class 类关联的所有元素。但是，例如，如果我点击<p ng-click="my_method()">MY FOURTH PARAGRAPH</p>，我该如何准确选择<div class = "my_class"> 4 </div>（在这种情况下，我感兴趣的 div 最接近我点击的点的顶部）？

【问题讨论】：

你想要 previous div.my_class 元素。您应该可以在 SO 或 jQuery Learning Center

中找到解决方案

【参考方案1】：

你可以将段落元素作为函数的参数传递：

<p ng-click="my_method(this)">MY FOURTH PARAGRAPH</p>

然后在你的函数中你可以找到带有prev()的div

function my_method(element) 
    var myDiv = $(element).prev();

【讨论】：

另外，使用$(element).prev('.my_class')获取前一个元素只有它具有my_class类

【参考方案2】：

假设你想保持结构不变，试试这个， 在你的 my_method(event) 接受事件。

my_method(event) 
  let paragraphElement = event.target;
  let divElement = $(paragraphElement).prev();

  // now you can change styles on that specific div
  divElement.css( "background-color", "red" )

有很多方法可以做到这一点，因为 Jquery 提供了很多方法来定位元素。 假设您将这些段落包含在 div 元素中，您可以选择 div by

let divElement = $(paragraphElement).parent();