jQuery将类添加到多次存在的最近元素(jQuery add class to nearest element which exists multiple times)

jQuery将类添加到多次存在的最近元素(jQuery add class to nearest element which exists multiple times)

我有这样的结构：

<span class="side"> <ul> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><span class="copy-short-url"><i class="fas fa-link"></i></span></li> <span class="confirm">Copied!</span> </ul> </span> ... <span class="side"> <ul> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><span class="copy-short-url"><i class="fas fa-link"></i></span></li> <span class="confirm">Copied!</span> </ul> </span> ... <span class="side"> <ul> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><span class="copy-short-url"><i class="fas fa-link"></i></span></li> <span class="confirm">Copied!</span> </ul> </span> ... <span class="side"> <ul> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><span class="copy-short-url"><i class="fas fa-link"></i></span></li> <span class="confirm">Copied!</span> </ul> </span>

我现在想要添加一个类到“确认”范围。 但仅限于属于相应代码块的范围。 因此，当我点击第二个跨度“copy-short-url”时，只有第二个跨度“确认”必须获得额外的类。

我怎样才能做到这一点？ 谢谢！

I have a structure like this:

<span class="side"> <ul> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><span class="copy-short-url"><i class="fas fa-link"></i></span></li> <span class="confirm">Copied!</span> </ul> </span> ... <span class="side"> <ul> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><span class="copy-short-url"><i class="fas fa-link"></i></span></li> <span class="confirm">Copied!</span> </ul> </span> ... <span class="side"> <ul> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><span class="copy-short-url"><i class="fas fa-link"></i></span></li> <span class="confirm">Copied!</span> </ul> </span> ... <span class="side"> <ul> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><a href="#"><i class="fas fa-print"></i></a></li> <li><span class="copy-short-url"><i class="fas fa-link"></i></span></li> <span class="confirm">Copied!</span> </ul> </span>

I now want to add a class to the span "confirm". But only for the span that belongs to the corresponding code block. So when I click on the second span "copy-short-url" only the second span "confirm" must get the additional class.

How can I do this? Thanks!

最满意答案

假设您处于.copy-short-url的单击事件处理程序中

$(this).closest('.side').find('.confirm').addClass('whatever');

closest()通过父母上升到dom树，直到找到匹配。 find()会通过查找所有匹配的子节点。

编辑：关于您在评论中的超时问题。

var $confirm = $(this).closest('.side').find('.confirm'); $confirm.addClass('whatever'); setTimeout(function(){ $confirm.removeClass('whatever'); }, 2000);

Provided you are in the click event handler for .copy-short-url

$(this).closest('.side').find('.confirm').addClass('whatever');

closest() goes up the dom tree through parents until it finds a match. find() goes down through children finding all matches.

Edit: In regard to your timeout question in the comments.

var $confirm = $(this).closest('.side').find('.confirm'); $confirm.addClass('whatever'); setTimeout(function(){ $confirm.removeClass('whatever'); }, 2000);