我有这样的结构:
<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);更多推荐
发布评论