Question

我有以下li元素：

<li>
    <span><img src="../media/check.svg" class="complete"></span>
    <span><img src="../media/modify.svg" class="modify"></span>
    <span><img src="../media/delete.png" class="delete"></span>
    <span class="dutyText">hello</span>
<li>

单击图像时（check.svg | modify.svg | delete.png），我想获取上面列表中的最后一个span元素。

不幸的是，使用以下代码，我得到了未定义：

console.log($(this).closest('li').filter('.dutyText').html());

我的问题是：

如何使用jQuery获取最后一个元素？
无论如何都使用过滤功能，如果不是为什么？
为什么我得到未定义？

Answer 1

如何使用jQuery获取最后一个元素？

您可以在jQuery集合
上使用:last选择器或last()方法
无论如何都使用过滤功能，如果不是为什么？

您可以使用filter()，如下所示。但是，在这种情况下，您不需要过滤器。
```
$(this).closest('li').children().filter('.dummyText')
```
为什么我得到未定义？

$(this).closest('li').filter('.dutyText')将搜索距离最近的祖先<li>，并尝试从li获取dummyText类。由于最接近的li没有类dummyText，因此选择器不会选择任何元素，因此在空对象上调用html()会返回undefined。

假设只有一个元素具有类dummyText

由于该元素是img的兄弟，您可以使用siblings()。
```
$(this).siblings('.dutyText')
```

您还可以使用父子层次结构

$(this).closest('li').find('.dutyText')

具有dummyText类

您可以使用:last选择器获取最后一个元素。
```
$(this).closest('li').find('.dutyText:last')
```

您可以使用last()方法

$(this).closest('li').find('.dutyText').last()

Answer 2

1：当您希望集合中的最后一个元素使用.last()时。

2：filter()用于过滤JQuery元素的集合。在您的情况下，您想要选择一个更深的深度（儿童）。所以你需要做find()。

3：您未定义，因为您尝试从li获取类.dutyText的HTML。它并不存在。

使用jQuery过滤元素

2 个答案: