使用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 selector或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 selector來獲取最后一個元素。

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

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

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

Answer 2

1：當你想要集合中的最后一個元素時，使用.last() 。

2： filter()用於過濾JQuery元素的集合。 在您的情況下，您想要選擇一個更深的深度（兒童）。 所以你需要做find() 。

3：你得到了未定義，因為你試圖從類.dutyText的li獲取HTML。 它並不存在。