使用 jQuery 过滤元素

Filtering an element using jQuery

本文关键字：元素 过滤 jQuery 使用      更新时间：2023-09-26

我有以下 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. 为什么我被定义不明确？

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

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

  2. 无论如何可以使用过滤器功能，如果没有，为什么？

    您可以按如下方式使用filter()。但是，在这种情况下，您不需要过滤器。

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

  3. 为什么我被定义不明确？

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

1 ： 当您想要集合中的最后一个元素时，请使用 .last() .

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

3：你没有得到定义，因为你试图从带有类.dutyText的li获取 HTML。它不存在。

相关文章：