如何添加一个活动的类只有一个父母与JQuery的元素？

Question

我有以下3个选项的测验的HTML代码。我想将类.active添加到.questionItem类中。

<ul class="questionList"> 
<li class="questionItem" data-pos="0"><span class="question">Question Text</span></li> 
<li class="questionItem" data-pos="1"><span class="question">Question Text</span></li> 
<li class="questionItem" data-pos="2"><span class="question">Question Text</span></li> 
</ul> 

目前，我有以下代码：

$(this).parent().find('.questionItem').addClass('active'); 

然而，这将积极为ALL questionItem秒。相反，我想将这个类添加到被点击的questionItem类中。

Answer 1

看起来像this指的是点击元素，所以只需使用$(this)。我添加了一些点击事件来演示this的工作原理。

$(".questionItem").click(function() { 
 
    $(this).addClass('active'); 
 
});

.active { 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="questionList"> 
 
<li class="questionItem" data-pos="0"><span class="question">Question Text</span></li> 
 
<li class="questionItem" data-pos="1"><span class="question">Question Text</span></li> 
 
<li class="questionItem" data-pos="2"><span class="question">Question Text</span></li> 
 
</ul>

不过，如果你是不是尝试选择父，你有没有需要一个.find：

$(".questionItem").click(function() { 
 
    $(this).parent().addClass('active'); 
 
});

.active { 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="questionList"> 
 
<li class="questionItem" data-pos="0"><span class="question">Question Text</span></li> 
 
<li class="questionItem" data-pos="1"><span class="question">Question Text</span></li> 
 
<li class="questionItem" data-pos="2"><span class="question">Question Text</span></li> 
 
</ul>

Answer 2

我觉得以下代码将帮助你！

$('.questionItem').click(function(){ 
    $(this).addClass('active').siblings().removeClass('active'); 
});