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

＆＃13;

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

＆＃13;

.red {
  background: #f00;
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用jQuery的closest方法。

<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添加类

jQuery切换在单击的函数上面存在的类

3 个答案: