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

Question

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

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

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

Answer 1

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

Answer 2

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

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

</div>

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

Answer 3

Относится к текущему контексту, в котором вы работаете. В представленном вами примере он будет ссылаться на последнего потомка указанного класса "Class".

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

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

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

Answer 4

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