Question

我有li个元素，如下所示。我想为主li代码中的第一个li提供背景颜色，

例如，考虑使用li的{{1}}，现在我想为此元素中的第一个id="mli1970"着色。

li

Answer 1

Jquery解决方案

要抓住第一个孩子使用eq()选择器并指定孩子的索引，从0开始。

$('#mli1970 li:eq(0)') // this selects the first 'li' inside your `li` with id mli1970

$('#mli1970 li:eq(0)').css('background-color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="chlk-timeline-years" id="chlk-timeline-decades">
  <li data-group-id="e4b5b419-9bf2-42dd-ecf5-6750ae5c0365" id="mli1837">1837
    <ul>
      <li></li>
    </ul>
  </li>
  <li data-group-id="7ead4d3a-a020-4e87-c5ca-f8043047c954" id="mli1970">1970
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>

  <li data-group-id="ffabab46-df77-40af-fe86-710284837703" id="mli1945">1945
    <ul>
      <li></li>
    </ul>
  </li>

  <li data-group-id="85bdb673-6287-48fd-808c-9aa64accc12e" id="mli1978">1978
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>

</ul>

另外，作为 CSS 解决方案，您可以执行以下操作

#mli1970 li:first-child
#mli1970 li:first-of-type
#mli1970 li:nth-child(0)
#mli1970 li:nth-of-type(0)

当然，同样的选择器也可用于Jquery选择器。

Answer 2

试试这个：

$(".chlk-timeline-years > li:first-child").css('background-color', '#F00');

或

$(".chlk-timeline-years > li:first-child ul li:first-child").css('background-color', '#F00');

Answer 3

使用

$('#mli1970 li:first-child').css('background-color','blue');

请参阅Snippest：

＆＃13;

$('#mli1970 li:first-child').css('background-color','cyan');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="chlk-timeline-years" id="chlk-timeline-decades">
  <li data-group-id="e4b5b419-9bf2-42dd-ecf5-6750ae5c0365" id="mli1837">1837
    <ul>
      <li></li>
    </ul>
  </li>
  <li data-group-id="7ead4d3a-a020-4e87-c5ca-f8043047c954" id="mli1970">1970
    <ul>
      <li>Test 1</li>
      <li>Test 2</li>
    </ul>
  </li>

  <li data-group-id="ffabab46-df77-40af-fe86-710284837703" id="mli1945">1945
    <ul>
      <li></li>
    </ul>
  </li>

  <li data-group-id="85bdb673-6287-48fd-808c-9aa64accc12e" id="mli1978">1978
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>

</ul>

＆＃13;

Answer 4

$('#mli1970 li').css({
  background: 'red'
});

资源：

Answer 5

如https://api.jquery.com/nth-child-selector/中所述：

$( "ul li:nth-child(2)" ).css('background-color', '#F00');

Answer 6

以下是解决方案，每个第一次发生的主要li下的li都会被涂成红色

＆＃13;

 $('.chlk-timeline-years li[data-action="data-color"]').each(function () {
 $(this).find('li').eq(0).css("background-color","red");});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="chlk-timeline-years" id="chlk-timeline-decades">
  <li data-group-id="e4b5b419-9bf2-42dd-ecf5-6750ae5c0365" data-action="data-color" id="mli1837">1837
    <ul>
      <li></li>
    </ul>
  </li>
  <li data-group-id="7ead4d3a-a020-4e87-c5ca-f8043047c954" data-action="data-color" id="mli1970">1970
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>

  <li data-group-id="ffabab46-df77-40af-fe86-710284837703" data-action="data-color" id="mli1945">1945
    <ul>
      <li></li>
    </ul>
  </li>

  <li data-group-id="85bdb673-6287-48fd-808c-9aa64accc12e" data-action="data-color" id="mli1978">1978
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>

</ul>

＆＃13;

使用Jquery如何添加第一个子元素

6 个答案: