jQuery Select Div Examples

Have you ever wondered of how many different possibilities exist when it comes to dealing with divs? In this article, I am going to share different ways of selecting divs by means of easy examples. You will see how to select first div, parent div, last div, div with class, child div, previous div, div inside another div, etc. easily by using single line of code in jQuery.

How to perform different Select operations on a Div using jQuery

For the sake of the example, let’s assume that we have some nested divs in our web page. We will now see how to select a specific div element in different cases and add a class to it for better understanding. Here we go:

Common HTML source for all the following examples:

<style type="text/css">
.yellow {
	background-color: #FFFF99;
	border: 1px solid #FF0;
}
.purple {
	background-color: #9999FF;
	border: 1px solid #90F;
}
.blue {	
	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;	
}
.green {
	background-color: #D7FFD7;
	border: 1px solid #090;
}
.divs_container div {
	padding: 10px;
	margin: 10px;
}
</style>

<div class="divs_container">

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

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

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

        	<div id="my_div4" class="yellow">This is MY DIV 4</div>    

        </div>    

        <div id="my_div5" class="yellow">This is MY DIV 5</div>    

      </div>

      <div id="my_div6" class="yellow">This is MY DIV 6</div>    

    </div>

	<div id="my_div7" class="yellow">This is MY DIV 7</div>    

	<div id="my_div8" class="yellow">This is MY DIV 8</div>        

	<p>&nbsp;</p>    

</div>

<p>	
<input type="submit" name="sbt_select_first_div" id="sbt_select_first_div" value="Select FIRST DIV and add Class to it ">

<input type="submit" name="sbt_select_last_div" id="sbt_select_last_div" value="Select LAST DIV and add Class to it ">

<input type="submit" name="sbt_select_parent_div" id="sbt_select_parent_div" value="Select PARENT DIV of DIV 4 and add Class to it ">

<input type="submit" name="sbt_select_div_with_class" id="sbt_select_div_with_class" value="Select the DIV with class PURPLE and alert ID">

<input type="submit" name="sbt_select_child_div" id="sbt_select_child_div" value="Select CHILD DIV of DIV 2 and add Class to it ">

<input type="submit" name="sbt_select_previous_div" id="sbt_select_previous_div" value="Select PREVIOUS DIV of DIV 8 and add Class to it">

<input type="submit" name="sbt_select_next_div" id="sbt_select_next_div" value="Select NEXT DIV of DIV 3 and add Class to it ">

<input type="submit" name="sbt_select_div_inside_div" id="sbt_select_div_inside_div" value="Select the DIV 6 inside DIV 1 and add Class to it ">

</p>

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

$(document).ready(function(){

//Add jQuery code here

});	

</script>

Example 1: Select the first div in the document and add Green class to it when a button is clicked

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

		$('.divs_container div:first').addClass('green');

		e.preventDefault();

	});

Example 2: Select the last div in the document and add Green class to it when a button is clicked

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

		$('.divs_container div:last').addClass('green');

		e.preventDefault();

	});

Example 3: Select the Parent div of Div 4 and and add Green class to it when a button is clicked

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

		$('.divs_container #my_div4').parent().addClass('green');

		e.preventDefault();

	});

Example 4: Select all Divs with purple class and alert their ID when a button is clicked

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

		$('.divs_container div.purple').each(function(index) {

		    alert( $(this).attr('id') );
		});		

		e.preventDefault();

	});

Example 5: Select Child Div of Div 2 and add Green class to it when a button is clicked

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

		$('.divs_container #my_div2').children().addClass('green');

		e.preventDefault();

	});

Example 6:  Select Previous Div of Div 8 and add Green class to it when a button is clicked

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

		$('.divs_container #my_div8').prev().addClass('green');

		e.preventDefault();

	});

Example 7: Select Next Div of Div 3 and add Green class to it when a button is clicked

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

		$('.divs_container #my_div3').next().addClass('green');

		e.preventDefault();

	});

Example 8:  Select Div 6 Inside Div 1 and add Green class to it when a button is clicked

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

		$('.divs_container #my_div1 > #my_div6').addClass('green');

		e.preventDefault();

	});

Over to You!

Do you know of any other ways to make div selections using jQuery? Feel free to suggest by commenting below.