jQuery切换在clicked函数上方存在的类

Question

我在下面有多个HTML实例：

<div class="col-md-4">
    <div class="widget">
        <div class="widget-head">
            <a class="collapse" href="#"><i class="fa fa-arrow-circle-down" aria-hidden="true"></i></a>
            <span>Title</span>

            <a href="#"><i class="fa fa-expand icon-spacer" aria-hidden="true" onclick="dosomething();"></i></a>
        </div>
    </div>
</div>

jQuery的：

function dosomething() {
    .widget above toggleClass('someClassHere');
}

我需要能够单击dosomething并将class切换（添加）到其上方最近的.widget 。

如何在jQuery做到这一点？

Answer 1

使用jQuery .closest（）

 $(function() { $('.icon-spacer').click(function(e) { e.preventDefault(); $(this).closest('.widget').toggleClass('red'); }); }); 

 .red { background: #f00; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="col-md-4"> <div class="widget"> <div class="widget-head"> <a class="collapse" href="#"><i class="fa fa-arrow-circle-down" aria-hidden="true"></i></a> <span>Title</span> <a href="#" class="fa fa-expand icon-spacer" aria-hidden="true"></a> </div> </div> </div> 

Answer 2

您可以使用closest jQuery的方法。

<a href="#"><i class="fa fa-expand icon-spacer" aria-hidden="true" onclick="dosomething(this);"></i></a>

function dosomething(obj) {
    $(obj).closest('.widget').toggleClass('someClassHere');
}

Answer 3

您可以使用onclick方法来触发事件，并在getSelectedElement之后通过jquery添加类