jQuery选择器:last-child的使用详解-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

jQuery选择器:last-child的使用详解

Jun 23, 2017 pm 02:44 PM

jquery last-child guna Penjelasan terperinci pemilih

概述

匹配最后一个子元素

':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

示例

描述:

在每个 ul 中查找最后一个 li

HTML 代码:

&lt;ul&gt;
&lt;li&gt;John&lt;/li&gt; 
&lt;li&gt;Karl&lt;/li&gt; 
&lt;li&gt;Brandon&lt;/li&gt; 
&lt;/ul&gt; 
&lt;ul&gt; 
&lt;li&gt;Glen&lt;/li&gt; 
&lt;li&gt;Tane&lt;/li&gt; 
&lt;li&gt;Ralph&lt;/li&gt; 
&lt;/ul&gt;

Salin selepas log masuk

jQuery 代码:

$(&quot;ul li:last-child&quot;)

Salin selepas log masuk

结果:

[ &lt;li&gt;Brandon&lt;/li&gt;, &lt;li&gt;Ralph&lt;/li&gt; ]

Salin selepas log masuk

此选择器能够匹配父元素的最后一个子元素。

注意:last只选取一个元素，而此选择符将匹配每个父元素的最后一个子元素。
语法结构:

$(&quot;:last-child&quot;)

Salin selepas log masuk

此选择器一般也要和其他选择器配合使用，比如类选择器、元素选择器等等。例如:

$(&quot;li:last-child&quot;).css(&quot;color&quot;,&quot;blue&quot;)

Salin selepas log masuk

以上代码能够将父元素下最后一个li元素中的字体颜色设置为蓝色。

注意:这里有必要结合上面的代码再对概念进行一下说明。这里所说的父元素并不是li，而是li的父元素。很多人往往误以为是匹配li元素的子元素中的最后一个元素。

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $(&quot;li:last-child&quot;).css(&quot;color&quot;,&quot;blue&quot;) 
  }) 
})  
</script>
</head>
<body>
<div>
  <ul>
    <li class="houtai" title="asp">ASP教程</li>
    <li class="houtai" title="net">ASP.NET教程</li>
    <li class="houtai" title="php">PHP教程</li>
  </ul>
  <ul>
    <li class="qiantai" title="html">html教程</li>
    <li class="qiantai" title="div">DIV+CSS教程</li>
    <li class="qiantai" title="jquery">jQUERY教程</li>
    <li class="qiantai" title="js">jAVAScript教程</li>
  </ul>
</div>
<button>点击查看效果</button>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci jQuery选择器:last-child的使用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn