Почему селектор :not не срабатывает первый раз?

Question

[rozhnovvv]

Здравствуйте. Я не владею jQuery и тем более JS, покопавшись в документации смог написать нужный мне код, но он работает не совсем так как мне надо. При первом нажатии на тег <li class="sf-field-sort_order">скрипт запускается, несмотря на селектор :not, и только после повторного нажатия на тег <li class="sf-field-sort_order"> скрипт начинает его игнорировать, как мне надо.

$('div.filtr form ul li:not(.sf-field-sort_order)').click(function(){
        var top = $('#main-content-area').offset().top;
		$('html, body').animate({scrollTop: top}, 600);
        $(".main_section").hide();   
	});

<div class="filtr"><form><ul>
    <li class="sf-field-post-meta-form"><ul><li>тест</li><li>тест</li><li>тест</li></ul></li>
    <li class="sf-field-post-meta-color"><ul><li>тест</li><li>тест</li><li>тест</li></ul></li>
    <li class="sf-field-sort_order"><ul><li>тест</li><li>тест</li><li>тест</li></ul></li>
    </ul></form></div>

Answer 1

[Aetae]

Потому что селектор div.filtr form ul li:not(.sf-field-sort_order) выбирает все li(кроме .sf-field-sort_order) которые находятся внутри div.filtr form ul, т.е. и <li>тест</li> в том числе. Если тебе нужны только прямые потомки, то надо писать так:

div.filtr > form > ul > li:not(.sf-field-sort_order)

и тогда всё будет работать как ты задумывал.

Answer 2

[Михаил Ливач]

самое очевидное решение - перенести проверку в код:

$('div.filtr form ul li').click(function(){
    if ( $(this).hasClass('sf-field-sort_order') ) {
        return;
    }
});

Прочие замечания:

1. вместо var в данном случае можно использовать const;
   
2. $(".main_section").hide() стоит переместить в complete-функцию для animate , иначе это будет происходить одновременно;
   
3. возможно, в этом обработчике надо запретить всплытие событие. Тогда каждый return следует заменить на return false;
   
4. можно подумать на тему: "нужен ли такой длинный селектор, $('div.filtr form ul li')?". Может быть, достаточно $('div.filtr li')