JQuery:如何使用类选择器找到最接近的元素

Question

我正在使用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")

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

Answer 1

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

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

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

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

Answer 2

假设您希望保持结构不变，请尝试以下操作，在my_method(event(accept事件中。

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

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