Как работает иерархия jQuery, когда дело доходит до селектора "this"?

#javascript #jquery #syntax #jquery-selectors #this

#javascript #jquery #синтаксис #jquery-селекторы #это

Вопрос:

Например, если бы я использовал этот код:

 $(".Class").children(:last).click(function(){
    $(this).siblings(":not(:last)").toggle();
}

Будет ли «this» относиться к классу «.Class» или к последнему дочернему элементу указанного класса «.Class»?

Ответ №1:

this будет ссылаться на элемент DOM, результаты которого совпадают в конечном селекторе в цепочке, которая запускает событие; в данном случае :last дочерний элемент .Class . Итак, событие сработает, если вы нажмете на last дочерний элемент последнего .Class класса. Посмотрите в этой скрипке, как только foo2 запускается оповещение.

 <div class="Class">
    <div> </div>
    <div> </div>
    <div> </div>
   <div> </div> <!--This is the last child of .Class-->

</div>

За исключением того, что он не будет работать так, как вы его опубликовали, поскольку :last должен быть в кавычках в виде строки.

Ответ №2:

Это будет ссылаться на выбранный элемент. То есть последний элемент в элементе с классом Class на момент привязки прослушивателя событий. Если вы добавили еще один элемент после предыдущего последнего элемента в том же родительском элементе после того, как прослушиватель событий уже был привязан, он все равно будет прослушивать то, что ранее было последним, а this также будет предыдущим последним.

1. Спасибо за ваш ответ, ваш был довольно запутанным.

2. Хм? Это звучит неправильно. children() Функция будет фильтровать его до дочерних элементов .Class , а не самого .Class себя.

3. @yahelc: Вы правы. Наверное, я недостаточно внимательно читал.

Ответ №3:

Я думаю, что в таком случае это последний ребенок. Это всегда последний элемент, совпадающий перед словом щелчка.

Ответ №4:

Это относится к текущему контексту, в котором вы работаете. В приведенном вами примере это будет относиться к последнему дочернему элементу указанного класса «Class».

Если бы вы должны были сделать следующее:

 $(".Class").children().each(function(){
    ...
});

$(this) будет ссылаться на каждого дочернего элемента по мере его повторения.