предварительно выбрать элемент в неорганизованном списке <ul><li>

Question

У меня есть список пользовательских параметров, один из которых по умолчанию определяется системой.

Я упорядочил эти параметры как элементы, которые можно активировать в списке. Я хотел бы, чтобы второй пункт был предварительно выбран, вот что я пробовал в JQuery и CSS
JQuery

$("ul > li:nth-child(2)").addClass("selected-state");

CSS

.selected-state {
     background: #c24e4e;
}

.selected-state просто имитирует поведение активных переключателей псевдокласса, наведения и фокусировки

это не сработало, ни у одного из детей не применен фон, но это также может быть фактором жизненного цикла Vue.js, о котором я не спрашиваю. Я надеюсь на вдохновение для других способов сделать то, на что я надеюсь

Answer 1

Работает просто отлично - вам даже не нужен jQuery:

ul > li:nth-child(2) {
  background: #c24e4e;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Answer 2

Ответ Джека Башфорда имеет для меня наибольшее значение, но если вы хотите использовать jQuery, вы можете использовать следующее:

var listItems = $("ul > li");
$(listItems[1]).addClass("selected-state");

.selected-state {
     background: #c24e4e;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
  </ul>

Answer 3

Вы можете сделать это несколькими способами:

ONE

ul > li:nth-of-type(2) {
   background: #c24e4e;
   color: #fff;
}

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>

ДВА

$('ul > li:eq(1)').addClass('selected-state')

.selected-state {
     background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>

THREE

Используйте следующий селектор брата с помощью CSS

ul > li:nth-child(1) + li { background: red; }

четыре

$('ul > li:nth-child(1)').addClass('selected-state');

Примечание : каждый ответ работает для одного и того же CSS-селектора, как и селектор jQuery, который вы можете попробовать любым.

=== Спасибо ===

Answer 4

Альтернативный вариант для jQuery. Вы можете использовать .eq() метод.

function highlight(param) {
  $("ul > li").eq(param).addClass("selected-state");
}
highlight(1);//Pass param(number) to highlight your desire li.

.selected-state {
  background: #c24e4e;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
</ul>