Question

我有这样的结构：

<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>

我现在想要在跨度中添加一个类＆＃34;确认＆＃34;。但仅适用于属于相应代码块的跨度。所以，当我点击第二个跨度＆＃34; copy-short-url＆＃34;只有第二个跨度＆＃34;确认＆＃34;必须得到额外的课程。

我该怎么做？谢谢！

Answer 1

如果您在.copy-short-url

的点击事件处理程序中

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

closest()通过父母上到dom树上，直到找到匹配为止 find()通过孩子找到所有比赛。{/ 1>

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

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

jQuery将类添加到最近存在多次的元素

1 个答案: