Question

我有一个用户选项列表，其中一个是系统确定的默认选项。

我将这些选项作为可单击项布置在列表中。我想预选第二项，这是我在<DATA DIRECTORY>和JQuery中尝试过的内容
jQuery

CSS

CSS

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

.selected-state { background: #c24e4e; }只是模仿伪类选择器活动，悬停和聚焦的行为

这不起作用，没有一个孩子应用背景知识，但这也可能是.selected-state生命周期的一个因素，这不是我要问的问题。我希望从其他方法中获得灵感

Answer 1

它工作得非常好-您甚至不需要jQuery：

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

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

Answer 2

Jack Bashford的答案对我来说最有意义，但是如果您想使用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

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>

Answer 4

您可以通过多种方式进行操作：

一个

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>

三个

使用CSS使用下一个兄弟选择器

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

四个

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

注意：每个答案都适用于相同的CSS选择器，类似于jQuery选择器，您可以尝试任何人。

===谢谢===

在非组织列表中预选择项目<ul> <li>

4 个答案: