Как добавить пользовательский выбранный класс фокуса в список, используя jquery

Question

Я хочу добавить пользовательский класс «выбранный фокус» в список элементов, где значение данных равно 4, используя jquery в следующем коде.

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