使用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. 为什么我得到不确定？

Answer 1

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

   您可以在jQuery集合上使用:last选择器或last()方法

2. 无论如何使用过滤功能,如果不是为什么？

   您可以使用filter()如下.但是,在这种情况下,您不需要过滤器.

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

3. 为什么我得到不确定？

   $(this).closest('li').filter('.dutyText')将搜索最近的祖先<li>,并会尝试获得li具有dummyText从它的类.由于最接近的li没有类dummyText,因此选择器不会选择任何元素,因此html()返回空对象undefined.

假设只有一个元素与类 dummyText

1. 由于元素是兄弟姐妹img,你可以使用siblings().

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

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

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

具有dummyText类的多个元素

1. 您可以使用:lastselector来获取最后一个元素.

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

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

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