Если этот текст содержится в H1, делайте что-то ТОЛЬКО с этим h1, а не с другими

Question

$('h1').hover(function(){
  if ($('h1:contains("three")')) {
    $(this).css({'color':'#09f'})
  }

    //$('h1').text().filter('three').css( 'color', '#09f' );
})

Мне трудно понять, как выбрать только элемент, содержащий текст.Прямо сейчас, приведенный выше код будет когда-либо менять цвет h1 на #09f, когда этот элемент завис, он должен только изменить цвет соответствующего h1 на #09f.

Я пытаюсь выяснить это для другоговариант использования.Кто-нибудь знает лучший способ сделать что-то только для соответствующего элемента?это будет .filter ()?:содержит()?.содержит()?.is ()

Answer 1

Вы можете просто использовать :contains на вашем h1 селекторе:

$('h1:contains("three")').hover(function() {
    $(this).css('color', '#09f');
});

Работающий jsfiddle .

Примечание: поскольку дляhover() цвет css остается, но вы можете исправить это с помощью второго аргумента hover().Вот для этого скрипка .

Answer 2

Используйте .is() напрямую:

$('h1').hover(function() {
    if($(this).is(':contains("three")')) {
        $(this).css('color', '#09f')
    }

    // $('h1').text().filter('three').css( 'color', '#09f' );
})

Answer 3

Я думаю, что вы хотите что-то вроде этого, которое будет искать только текст «три» в h1, который находится над ним, и изменять только цвет этого h1:

$('h1').hover(function(){
  if ($(':contains("three")', this).length) {
    $(this).css({'color':'#09f'})
  }
})