.has() JQ Home  <<  Filtering  <<  .has()

Has descendants filter.

Description

The .has() method is used to reduce the matched set to to those elements that have a descendant that matches the specified selector or DOM element.

Syntax

Signature Description
.has( selector )Reduce the matched set to those elements that have a descendant that matches the selector.
.has( contains )Reduce the matched set to those elements that have a descendant that matches the DOM element.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to match elements against.Selector
containsA DOM element to match elements against.Element

Return

A jQuery object containing the filtered subset of elements.

.has( selector ) Example  Filtering  <<  Top

Reduce the matched set to those elements that have a descendant that matches the selector.

In the example below we select all 'p' elements that have an 'i' descendant and turn the background colour yellow.


$(function(){
  $('#btn15').on('click', function() {
    $('.content p').has('i')
                   .css('backgroundColor', 'yellow'); 
  });
});

Press the button below to action the above code:

.has( contains ) Example  Filtering  <<  Top

Reduce the matched set to those elements that have a descendant that matches the DOM element.

In the example below we select paragraph with an id of 'para16' and save the DOM element. We then select all forms on the page and turn the background colour to orange on the form with the saved DOM element.


$(function(){
  $('#btn16').on('click', function() {
    var para16 = document.getElementById('para16');
    
    $('.content form').has(para16)
                      .css('backgroundColor', 'orange'); 
    });
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Intermediate Tutorials - Lesson 1 - Filtering Elements