Фильтрация элемента с помощью 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), я хочу, чтобы получить последний элемент диапазона приведенный выше список.

К сожалению, с помощью следующего кода, я получаю не определено:

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

Вопросы, которые я являются:

1. Как я могу взять последний элемент с помощью JQuery?
2. Есть ли способ использовать функцию фильтра, и если не почему?
3. Почему я не знаю?

Answer 1

1. Как я могу взять последний элемент с помощью JQuery?

   Вы можете использовать :last селектор или last() метод на коллекции JQuery

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. Вы можете использовать :last селектор, чтобы получить последний элемент ,

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

2. Вы можете использовать метод last()

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

Answer 2

1: Если вы хотите, последний элемент из коллекции использования .last().

2: filter() предназначен для фильтрации коллекции элементов JQuery. В вашем случае вы хотите выбрать одну глубину глубже (дети). Поэтому вам нужно сделать find().

3: Вы получаете неопределенный результат, потому что пытаетесь получить HTML из li с классом .dutyText. И этого не было.