如何添加一個活動的類只有一個父母與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'); 
});