{"id":2736,"date":"2013-03-09T10:53:07","date_gmt":"2013-03-09T10:53:07","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=2736"},"modified":"2013-03-09T10:53:07","modified_gmt":"2013-03-09T10:53:07","slug":"using-jquery-add-to-selection-easy-examples-to-add-to-selection","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/using-jquery-add-to-selection-easy-examples-to-add-to-selection\/","title":{"rendered":"jQuery Add To Selection Examples"},"content":{"rendered":"<p>Let&#8217;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. \u00a0Do you know how to do this? If not, here is a an easy to follow article that will teach you <strong>jQuery to add to selection<\/strong>.<\/p>\n<p><!--more--><\/p>\n<h2>How to use jQuery add to selection<\/h2>\n<p>Let&#8217;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.\u00a0The following example shows you how to do it easily:<\/p>\n<h3>Examples &#8211; Easily add to selection using jQuery<\/h3>\n<p>The following code shows the existing items\/elements that have already been selected:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Already existing selection of elements\/items\">&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\n\n\tvar all_elements = $('#element1, #element1, .my_div1');\n\n});\t\n\n&lt;\/script&gt;<\/pre>\n<p>In all the examples that follow now, we will try to <strong>add a new div to the selection using it&#8217;s class<\/strong>.<\/p>\n<h3>Example 1 &#8211; Add a new div to selection using jQuery by specifying the target at the end<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\t\t\t\n\n\t\/\/Method 1\n\t$('.new_div').add(all_elements);\n\n});\t\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 2 &#8211; Add a Div to selection using jQuery by specifying the target first<\/h3>\n<pre class=\"lang:xhtml decode:true crayon-selected\" title=\"Example 2\">&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\t\t\t\n\n\t\/\/Method 2\n\tall_elements.add('.new_div');\n\n});\t\n\n&lt;\/script&gt;<\/pre>\n<h4>Your Turn!<\/h4>\n<p>Do you know of any other ways to use\u00a0<em><strong>jQuery to add to selection<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;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. \u00a0Do you know how to do this? If not, here is a an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,43,41],"class_list":["post-2736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-I8","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=2736"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2736\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=2736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=2736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=2736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}