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>