Question

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

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

I’m having a hard time figuring out how to select only the element that contains the text. Right now, the code above will turn ever h1’s color to #09f when that element’s hovered, it should only turn the matching h1’s color to #09f.

I’m trying to figure this out for a different use case.
Does anyone know the best method for doing something to ONLY the matching element?
would it be .filter()? :contains()? .contains()? .is()?

Answer 1

Use .is() directly:

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

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