jQuery獲取最後一個子元素的方法及使用

一、選擇器方法

選擇器是jQuery最基礎的操作之一，jQuery中的選擇器是為了讓我們更方便的獲取元素而提供的交互式方式。對於獲取最後一個子元素，可以使用以下選擇器方法：

$('父元素').children().last()

這個方法的意思是獲取父元素下的所有子元素，然後獲取最後一個子元素。

示例代碼如下：

<ul id="list">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ul>

<script>
  var lastChild = $('#list').children().last();
  console.log(lastChild.text()); // "元素3"
</script>

二、eq()方法

我們也可以使用jQuery的eq()方法來獲取最後一個子元素。該方法返回的是與指定索引匹配的元素，如果省略參數，則表示選擇第一個元素。因為jQuery中索引是從0開始的，所以獲取最後一個子元素的索引是子元素的數量減1。

$('父元素').children().eq(-1)

這個方法的意思是獲取父元素下的所有子元素，然後獲取索引號為-1的元素，即最後一個子元素。

示例代碼如下：

<ul id="list">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ul>

<script>
  var lastChild = $('#list').children().eq(-1);
  console.log(lastChild.text()); // "元素3"
</script>

三、last()方法

last()方法是jQuery中用於篩選元素集合中的最後一個元素的函數。對於獲取最後一個子元素，可以使用以下代碼：

$('父元素').children().last()

這個方法的意思是獲取父元素下的所有子元素，然後獲取最後一個子元素。

示例代碼如下：

<ul id="list">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ul>

<script>
  var lastChild = $('#list').children().last();
  console.log(lastChild.text()); // "元素3"
</script>

四、children()方法

children()方法用於獲取指定元素的直接子元素，該方法只會返回指定元素下一級的子元素。對於獲取最後一個子元素，可以使用以下代碼：

$('父元素').children().eq(-1)

這個方法的意思是獲取父元素下的所有子元素，然後獲取索引號為-1的元素，即最後一個子元素。

示例代碼如下：

<ul id="list">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ul>

<script>
  var lastChild = $('#list').children().eq(-1);
  console.log(lastChild.text()); // "元素3"
</script>

五、find()方法

find()方法用於獲取匹配選擇器的所有子元素，包括嵌套的子元素。對於獲取最後一個子元素，可以使用以下代碼：

$('父元素').find(':last-child')

這個方法的意思是在父元素下查找最後一個子元素。可以使用:last-child選擇器或者:last來選擇最後一個匹配的元素。

示例代碼如下：

<ul id="list">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ul>

<script>
  var lastChild = $('#list').find(':last-child');
  console.log(lastChild.text()); // "元素3"
</script>