jQuery :has() Selector Examples

The jQuery has selector basically selects elements which contain at least one element that matches the specified selector. So this means that for any occurrence of a target within the source, the target is considered to be found. Confusing? Don’t worry. In this article, I am going to share easy examples that show you how to use the :has() selector in real time. And once you go through the examples, the concept of the :has() selector will be much more clear. Don’t forget to try the demo.

How to use the jQuery has Selector

Here is the basic syntax of the :has() selector in jQuery

$(":has(selector)")

In order to see how it works, let’s assume that we have set of elements in a web page such as divs, paragraphs, span. Let’s now see the different examples:n

Common HTML source code for all the following examples:

<style type="text/css">
.bold {
	font-weight: bold;
	font-size: 120%;
}
.divs_container div {
	padding: 10px;
	margin: 10px;
}
.yellow {
	background-color: #FFFF99;
	border: 1px solid #FF0;
}
.purple {
	background-color: #9999FF;
	border: 1px solid #90F;
}
.green {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.blue {
	background-color: #E1F3FF;
	border: 1px solid #09F;
}
.red_text {
	color: #D70000;
	font-weight: bold;
}
.orange {	
	border: 10px solid #F90;
	color: #FFF;
	font-size: 200%;
	font-weight:bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;	
}
</style>

<div class="divs_container">

	<div id="my_div1" class="purple">This is MY DIV 1</div>

  <div id="my_div2" class="blue">This is MY DIV 2

    	<div class="yellow">This is a child DIV</div>

    </div>        

  <div id="my_div3" class="red_text">This is MY DIV 3

    	<p>This is para</p>

    </div>    

  <p id="my_para" class="blue red_text">This is a container para <span class="bold">with some text</span></p>

  <p>
    <label for="first_name">First Name</label>
    <input type="text" name="first_name" id="first_name">
  </p>
  <p>
    <label for="message">Message<br>
    </label>
    <textarea name="message" id="message" cols="45" rows="5" class="green">Default Text.</textarea>
  </p>
</div>

<p>	
<input type="submit" name="sbt_check_div_has_class" id="sbt_check_div_has_class" value="Check if MY DIV 1 has GREEN class">

<input type="submit" name="sbt_div_has_div" id="sbt_div_has_div" value="Check if MY DIV 2 has a DIV in it and alert">

<input type="submit" name="sbt_check_div_has_para" id="sbt_check_div_has_para" value="Check if MY DIV 3 has para and add GREEN class">

<input type="submit" name="sbt_check_para_has_span" id="sbt_check_para_has_span" value="Check if PARA has SPAN and REMOVE RED_TEXT class">

<input type="submit" name="sbt_check_textbox_has_attribute" id="sbt_check_textbox_has_attribute" value="Check if Textbox has CLASS Attribute and alert">

<input type="submit" name="sbt_check_textarea_has_attribute" id="sbt_check_textarea_has_attribute" value="Check if Textarea has CLASS Attribute and to value">

</p>

<script type="text/javascript" language="javascript">

$(document).ready(function(){

//Add jQuery code here

});	

</script>

Example 1:  Check if MY DIV 1 has “green” class and show alert when a button is clicked

	$('#sbt_check_div_has_class').on("click", function(e){		

		if( $("#my_div1").hasClass("green") )
		{
			alert('MY DIV 1 has GREEN class');	
		}
		else
		{
			alert('MY DIV 1 does NOT have GREEN class');				
		}

		e.preventDefault();

	});

Example 2:  Check if MY DIV 2 has a DIV inside it and show alert when a button is clicked

	$('#sbt_div_has_div').on("click", function(e){		

		if( $("#my_div2:has(div)") )
		{
			alert('MY DIV 2 has a DIV in it.');	
		}
		else
		{
			alert('MY DIV 2 DOES NOT have a DIV in it.');	
		}

		e.preventDefault();

	});

Example 3:  Check if MY DIV 3 has a PARAGRAPH inside it and if yes, add a class to MY DIV 3 when a button is clicked

	$('#sbt_check_div_has_para').on("click", function(e){		

		$("#my_div3:has(p)").addClass('green');

		e.preventDefault();

	});

Example 4:  Check if MY PARA has a SPAN inside it and if yes,  remove the “red_text” class from para when a button is clicked

	$('#sbt_check_para_has_span').on("click", function(e){		

		$("#my_para:has(span)").removeClass('red_text');

		e.preventDefault();

	});

Example 5:  Check if  TEXTBOX has “class” attribute show alert when a button is clicked

	$('#sbt_check_textbox_has_attribute').on("click", function(e){		

		if($("#first_name[class]").length) 
		{
			alert('Textbox HAS Class attribute.');	
		}
		else
		{
			alert('Textbox does NOT have the Class attribute.');		
		}

		e.preventDefault();

	});

Example 6:  Check if TEXTAREA has  “class” attribute, add new value to default value when a button is clicked

	$('#sbt_check_textarea_has_attribute').on("click", function(e){		

		if($("#message[class]").length) 
		{
			$("#message").val( $("#message").val() + ' This is new text appended to the Textarea Dynamically!' );
		}

		e.preventDefault();

	});

Example 7:  Check if DIV has  children and show alert when a button is clicked

	$('#sbt_check_div_children').on("click", function(e){		

		if( $("#my_div4").children().length ) 
		{
			alert('MY DIV 4 HAS Children.');	
		}
		else
		{
			alert('MY DIV 4 DOES NOT HAVE Children.');	
		}

		e.preventDefault();

	});

That’s it!

Do you know of any other ways to use the jQuery :has() selector? Feel free to suggest by commenting below.