Глюк jQuery или я чего-то не понимаю?

[VJiK]

HTML:

<ul class="b-sideMenu>
	<li class="cur"><span>1</span></li>
	<li><span>2</span></li>
	<li><span>3</span></li>
</ul>

JS #1:

$('#menu :not(.cur) SPAN').each(function(){
	console.log($(this).text())
});
$('#menu').on('click', ':not(.cur) SPAN', function(){
	console.log($(this).text())
});

В консоль выводится "2" и "3" (логично).

События click работает для всех SPAN. Почему? Должно работать для 2 и 3.

JS #2:

$('#menu >:not(.cur) SPAN').each(function(){
	console.log($(this).text())
});
$('#menu').on('click', '>:not(.cur) SPAN', function(){
	console.log($(this).text())
});

В консоль выводится "2" и "3" (логично).

События click не работает ни для одного SPAN. Почему? Должно работать для 2 и 3.

JS #3:

$('#menu LI:not(.cur) SPAN').each(function(){
	console.log($(this).text())
});
$('#menu').on('click', 'LI:not(.cur) SPAN', function(){
	console.log($(this).text())
});

В консоль выводится "2" и "3" (логично).

События click работает для SPAN "2" и "3" (логично).

Собственно, не могу понять почему в JS #1 и JS #2 некорректно вешаются события на SPAN?

PS jQuery версии 1.7.1

[s0rr0w]

':not(.cur) SPAN'

Если перед :not() не указан селектор, то берется *. Это значит, что будет найден любой элемент, у которого нет класса cur, внутри которого на любой глубине есть SPAN. Так вот UL подпадает под данное правило.

>:not(.cur) SPAN'

Найти любой элемент, у которого в прямом подчинении нет ни одного элемента с классом .cur, а у него найти потомка SPAN. Так вот UL содержит один элемент, значит ожидаемое условие не будет выполнено

Собственно, не могу понять почему в JS #1 и JS #2 некорректно вешаются события на SPAN?

Все работает так, как и написано, но вы имеете свое представление о том, как это должно работать. Посему лучше всего поизучать матчасть.

[VJiK]

Понял в чём тупил. Я думал поиск начинается внутри #menu и не включает в себя сам #menu.

Спасибо за объяснения!

[s0rr0w]

Понял в чём тупил. Я думал поиск начинается внутри #menu и не включает в себя сам #menu.

Спасибо за объяснения!

Приведенный селектор, если не ошибаюсь, работает вообще внутри всего документа.

[VJiK]

$('#menu').on('click', 'LI:not(.cur) SPAN', function(){
        console.log($(this).text())
});

Нет, тут как раз событие вешается на #menu, а потом в этом блоке уже ищется селектор 'LI:not(.cur) SPAN', и если найдено - выполняется функция.

[s0rr0w]

Нет, тут как раз событие вешается на #menu, а потом в этом блоке уже ищется селектор 'LI:not(.cur) SPAN', и если найдено - выполняется функция.

Проверь, на всякий случай.. Создай клон всего блока меню, с другой id, и посмотри как все получится

[VJiK]

ну вообще нельзя же несколько id использовать))

А если создать клон - то будет действовать и внутри клона, но не на всём документе.

[s0rr0w]

ну вообще нельзя же несколько id использовать))

А если создать клон - то будет действовать и внутри клона, но не на всём документе.

Внимательно прочитай, я же написал, что с другим id

[VJiK]

извиняюсь, не заметил)

[s0rr0w]

Бывает, сам грешу таким