Filter an element using jQuery

Question

I have the following li element:

<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>

When I click on the image (check.svg | modify.svg | delete.png) I want to get the last span element from the above list.

Unfortunately, with the following code, I get undefined:

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

I have the following questions:

• How can I take the last item using jQuery?
• Can I use the filter function, and if not why?
• Why am I getting undefined?

Answer 1

• How can I take the last item using jQuery?

  You can use :lastselector or last()in jQuery collection

• Is there a way to use the filter function, and if not why?

  filter(), . .

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

• undefined?

  $(this).closest('li').filter('.dutyText') <li> li dummyText. li dummyText, - , html() undefined.

, dummyText

• img, siblings().

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

• parent-child

  $(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: undefined, HTML li .dutyText. .