jQuery Add To Selection Examples

Let’s say that you have a set of elements in a selection i.e. you have already added the elements/items upon which you want to take an action upon and now you want to expand the selection by adding to selection using jQuery.  Do you know how to do this? If not, here is a an easy to follow article that will teach you jQuery to add to selection.

How to use jQuery add to selection

Let’s assume that have already added few elements to selection by using their ID and class. And now we would like to add to this selection of elements using jQuery. The following example shows you how to do it easily:

Examples – Easily add to selection using jQuery

The following code shows the existing items/elements that have already been selected:

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

$(document).ready(function(){

	var all_elements = $('#element1, #element1, .my_div1');

});	

</script>

In all the examples that follow now, we will try to add a new div to the selection using it’s class.

Example 1 – Add a new div to selection using jQuery by specifying the target at the end

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

$(document).ready(function(){			

	//Method 1
	$('.new_div').add(all_elements);

});	

</script>

Example 2 – Add a Div to selection using jQuery by specifying the target first

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

$(document).ready(function(){			

	//Method 2
	all_elements.add('.new_div');

});	

</script>

Your Turn!

Do you know of any other ways to use jQuery to add to selection? Feel free to suggest by commenting below.