javascript - 使用 jQuery 过滤元素

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());

我的问题是:

1. 如何使用 jQuery 获取最后一个元素？
2. 是否可以使用过滤功能？如果不能，为什么？
3. 为什么我得到 undefined？

Answer 1

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

   You can use :last selector or last() method on the jQuery collection

2. 是否可以使用过滤器功能，如果不能，为什么？

   You can use filter() as follow. However, in this case, you don't need filter.

   $(this).closest('li').children().filter('.dummyText')
   

3. 为什么我得到 undefined？

   $(this).closest('li').filter('.dutyText') will search for the closest ancestor <li> and will try to get the li having dummyText class from it. As the closest li don't have class dummyText, the selector will not select any element and so calling html() on empty object returns undefined.

假设只有一个元素的类是dummyText

1. 因为该元素是 img 的兄弟元素, 你可以使用 siblings() .

   $(this).siblings('.dutyText')
   

2. 你也可以使用父子层次结构

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

具有 dummyText 的多个元素类

1. 您可以使用 :last 选择器获取最后一个元素。

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

2. 您可以使用 last() 方法

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