如何使用last()选择最后一个元素，而不需要遍历子元素

How to select last element with last() without going through sub elements

本文关键字：元素 遍历 不需要 最后一个 last 何使用 选择      更新时间：2023-09-26

我试图改变我的ul中最后一个li的background-color属性，id list1("列表项4"后的li)。但是，如果我运行$( "ul#list1 li" ).last().css( "background-color", "red" );，则该函数选择最后一个li，即list2 item1。

是否有一种方法可以告诉函数不通过子元素运行?

	
$( "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>

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>

使用.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>

试试:last-child 

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


$( "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)，然后添加样式为
的类

使用$( "#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>

你可以这样做:

$ (" ul # list1>李:最后"). css("背景颜色","红");

$( "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>

试试这样:

var li = $( "ul#list1 li" );
var subLiLength = $("ul#list1 ul li").length;
li.eq(li.length - subLiLength - 1).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>

相关文章：