Если оператор завершается неудачно с $ (this), но работает с абсолютным

Question

Я столкнулся с этим очень странным сценарием.Это не скрывает H1:

if ($('#content h1').hasClass('active')) {
    $(this).hide();
}

Только это будет:

if ($('#content h1').hasClass('active')) {
    $('#content h1').hide();
}

Почему я не могу использовать (это)?Что-то не так со сценарием?

Answer 1

Это правильное поведение. В контексте вашего if оператора this содержит не ссылку на ваш элемент h1, а на элемент document (или функцию, если вы находитесь внутри функции).

Answer 2

Оператор $('#content h1').hasClass('active') возвращает логическое значение (true или false), в отличие от объекта jQuery, для которого вы пытаетесь использовать $(this). Смотрите использование hasClass здесь .

Если вы пытаетесь выполнить действие со всеми элементами, которые соответствуют определенному селектору, попробуйте вместо этого этого селектора:

$("#content h1.active").hide();

Находит все элементы с атрибутом id "content", которые содержат элемент h1 с атрибутом class "active", и скрывает их все.

Answer 3

То, что вы хотите, вероятно,

var h1 = $('#content h1')
if (h1).hasClass('active')) {
    h1.hide();
}

ваше "this", как указано выше, не будет ссылаться на ваш объект.

Answer 4

Вы можете сделать:

$('#content h1').foreach(function() {
    if (!$(this).hasClass('active')) {
        $(this).hide();
    }
});

В этом случае, как пояснил Ян, это будет в том контексте, в котором вы ожидаете (элемент заголовка).