:has() JQ Home  <<  Selectors  <<  :has()

• <<    :empty Selector
• :parent Selector     >>

Has Element selector.

Shorthand version $(':has(selector)')

Description

The :has() selector, selects elements containing at least one element matching the specified selector.

• The selector can appear in the specified element and/or descendants thereof.
• If this selector is not preceded by another selector, the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the examples below to narrow the search and improve performance.
• The same results can be achieved with better performance using $("cssSelector").has(selector/DOMElement).

Syntax

Parameters

Return

N/A.

:has() Examples Selectors  <<  Top

Selects elements containing at least one element matching the specified selector.

The following example will check for 'p' elements on the page that have 'input' elements within them and apply an orange background when the button below is clicked (areas surronding input buttons).

$(function(){
  $('#btn1').on('click', function() {
    $("p :has(input)").css('backgroundColor', 'orange');
  });
}); 

The following example will check for 'p' elements on the page that have 'input' elements within them and apply an orange background when the button below is clicked. Check the icons at the top and bottom of the page after clicking the button (code).

$(function(){
  $('#btn2').on('click', function() {
    $("b :has(span)").css('backgroundColor', 'yellow');
  });
}); 

The following example will check for 'p' elements on the page that have 'input' elements within them and apply an orange background when the button below is clicked. Check the icons at the top and bottom of the page after clicking the button (h4 spans in leftsidebar).

$(function(){
  $('#btn3').on('click', function() {
    $("h4 :has(span)").css('backgroundColor', 'silver');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 4 - jQuery Selectors

• <<    :empty Selector
• :parent Selector     >>