javascript - 如何使用 jquery 将自定义选定的焦点类添加到列表

Question

我想在下面的代码中使用 jquery 添加自定义“选定焦点”类来列出数据值为 4 的项目。

 <ul class="list">
   <li data-value="5" class="option selected focus">Bootstrap 4.3.1</li>
   <li data-value="3" class="option">Bootstrap 4.1.1</li>
   <li data-value="1" class="option">Bootstrap 4.0.0</li>
   <li data-value="2" class="option">Bootstrap 3.3.0</li>
   <li data-value="4" class="option">Bootstrap 3.0.0</li>
   <li data-value="6" class="option">No Bootstrap</li>
 </ul>

我试过了

$('.list').childern('li').attr('selected');

Answer 1

您需要首先从所有选项中删除类，然后将其添加到一个

$('.list').find('li').removeClass('selected focus');
$('.list').find('li[data-value=4]').addClass('selected focus');

.selected.focus {
 color: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
   <li data-value="5" class="option selected focus">Bootstrap 4.3.1</li>
   <li data-value="3" class="option">Bootstrap 4.1.1</li>
   <li data-value="1" class="option">Bootstrap 4.0.0</li>
   <li data-value="2" class="option">Bootstrap 3.3.0</li>
   <li data-value="4" class="option">Bootstrap 3.0.0</li>
   <li data-value="6" class="option">No Bootstrap</li>
 </ul>