Question

我尝试更改我的background-color li的{{1}}属性，ID为 list1 （＆＃34;列表项4＆＃34）。但是，如果我运行ul，则该功能会选择最后一个$( "ul#list1 li" ).last().css( "background-color", "red" );，即 list2 item1 。

有没有办法告诉函数不要运行子元素？

＆＃13;

li

＆＃13;

	
$( "ul#list1 li" ).last().css( "background-color", "red" );

＆＃13;

Answer 1

<强> JS

$( "ul#list1 > li:last-child" ).css( "background-color", "red" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list1">
  <li>list1 item 1</li>
  <li>list1 item 2</li>
  <li>list1 item 3</li>
  <li>list1 item 4</li>
  <li>
      <ul>
        <li>list2 item 1</li>
      </ul>
  </li>
</ul>

你也可以通过css来做，你还需要使用>来确定你想要使用哪个孩子。

<强> CSS

ul#list1 > li:last-child{
  background-color : red;
  }

    <ul id="list1">
      <li>list1 item 1</li>
      <li>list1 item 2</li>
      <li>list1 item 3</li>
      <li>list1 item 4</li>
      <li>
          <ul>
            <li>list2 item 1</li>
          </ul>
      </li>
    </ul>

Answer 2

尝试:last-child

$("#list1:last-child").css( "background-color", "red" );

Answer 3

使用仅遍历直接孩子的.children()方法。

	
$( "ul#list1").children().last().css( "background-color", "red" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li>list1 item 1</li>
  <li>list1 item 2</li>
  <li>list1 item 3</li>
  <li>list1 item 4</li>
  <li>
      <ul>
        <li>list2 item 1</li>
      </ul>
  </li>
</ul>

Answer 4

$( "ul#list1 li:not(ul#list1 li ul li)" ).last().addClass('red')

.red{background-color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li>list1 item 1</li>
  <li>list1 item 2</li>
  <li>list1 item 3</li>
  <li>list1 item 4</li>
  <li>
      <ul>
        <li>list2 item 1</li>
      </ul>
  </li>
</ul>

定义:not(ul#list1 li ul li)然后添加带样式的类

Answer 5

使用$( "#list1 li:last-child" ).prev().css( "background-color", "red" );选择list1 item 4

$( "#list1 li:last-child" ).prev().css( "background-color", "red" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li>list1 item 1</li>
  <li>list1 item 2</li>
  <li>list1 item 3</li>
  <li>list1 item 4</li>
  <li>
      <ul>
        <li>list2 item 1</li>
      </ul>
  </li>
</ul>

Answer 6

你可以这样做：

$（“ul＃list1＆gt; li：last”）。css（“background-color”，“red”）;

$( "ul#list1 > li:last" ).css( "background-color", "red" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li>list1 item 1</li>
  <li>list1 item 2</li>
  <li>list1 item 3</li>
  <li>list1 item 4</li>
  <li>
      <ul>
        <li>list2 item 1</li>
      </ul>
  </li>
</ul>

Answer 7

尝试这样的事情：

＆＃13;

var li = $( "ul#list1 li" );
var subLiLength = $("ul#list1 ul li").length;
li.eq(li.length - subLiLength - 1).css( "background-color", "red" );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li>list1 item 1</li>
  <li>list1 item 2</li>
  <li>list1 item 3</li>
  <li>list1 item 4</li>
  <li>
      <ul>
        <li>list2 item 1</li>
      </ul>
  </li>
</ul>

＆＃13;

如何选择last（）的最后一个元素而不通过子元素

7 个答案: