{"id":3414,"date":"2013-04-04T19:00:13","date_gmt":"2013-04-04T19:00:13","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3414"},"modified":"2013-04-04T19:00:13","modified_gmt":"2013-04-04T19:00:13","slug":"jquery-lt-selector-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-lt-selector-examples\/","title":{"rendered":"jQuery :lt() Selector Examples"},"content":{"rendered":"<p>Using jQuery, it is very easy to select all elements at an index lesser than index within the matched set.\u00a0It can be done by using the <em><strong>jQuery lt selector<\/strong><\/em>. In this article, I am going to share different examples on how to use the :lt selector in jQuery.<\/p>\n<p><!--more--><\/p>\n<h2>How to use the jQuery lt Selector<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3414\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p><strong>:lt() selector represents the Less Than selector.<\/strong><\/p>\n<p>Let&#8217;s see how to use the :lt() selector by means of examples. Let us assume that we have few divs, list items &amp; a table in our web page. Now from the\u00a0different\u00a0elements that are on the page, we would like to select all elements from each of the different kinds of listed elements and highlight them. \u00a0We will be using the index number to target those elements. Here&#8217;s how it can be done:<\/p>\n<p><strong>Common HTML Source code for all the following examples:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Common HTML Source code for all the following examples:\">&lt;style type=\"text\/css\"&lt;\n.existing_yellow {\n\tbackground-color: #FFFF99;\n\tborder: 1px solid #FF0;\n}\n.existing_purple {\n\tbackground-color: #9999FF;\n\tborder: 1px solid #90F;\n}\n.green {\n\tbackground-color: #D7FFD7;\n\tborder: 1px solid #090;\n}\n.blue {\n\tbackground-color: #E1F3FF;\n\tborder: 1px solid #09F;\n}\n.red_text {\n\tcolor: #D70000;\n\tfont-weight: bold;\n}\n.orange {\t\n\tborder: 10px solid #F90;\n\tcolor: #FFF;\n\tfont-size: 200%;\n\tfont-weight:bold;\n\tfont-family: Georgia, \"Times New Roman\", Times, serif;\n\tfont-style: italic;\t\n}\n&lt;\/style&lt;\n\n&lt;div class=\"divs_container\"&lt;\n\n\t&lt;div id=\"my_div1\"&lt;This is MY DIV 1\n\n   \t  &lt;div id=\"my_div2\" class=\"existing_yellow red_text\"&lt;This is MY DIV 2&lt;\/div&lt;\n\n    &lt;\/div&lt;\n\n  &lt;div id=\"my_div3\" class=\"existing_purple\"&lt;This is MY DIV 3&lt;\/div&lt;    \n\n    &lt;div id=\"my_div4\" class=\"existing_yellow\"&lt;This is MY DIV 4&lt;\/div&lt;    \n\n\t&lt;p&lt;&amp;nbsp;&lt;\/p&lt;    \n\n  &lt;ul&lt;\n    &lt;li&lt;List item 1&lt;\/li&lt;\n    &lt;li&lt;List item 2&lt;\/li&lt;\n    &lt;li&lt;List item 3&lt;\/li&lt;\n    &lt;li&lt;List item 4&lt;\/li&lt;\n    &lt;li&lt;List item 5&lt;\/li&lt;\n  \t&lt;\/ul&lt;\n\n  &lt;table width=\"100%\" border=\"1\" cellspacing=\"1\" cellpadding=\"1\"&lt;\n      &lt;tr&lt;\n        &lt;td&lt;R1C1&lt;\/td&lt;\n        &lt;td&lt;R1C2&lt;\/td&lt;\n        &lt;td&lt;R1C3&lt;\/td&lt;\n        &lt;td&lt;R1C4&lt;\/td&lt;\n      &lt;\/tr&lt;\n      &lt;tr&lt;\n        &lt;td&lt;R2C1&lt;\/td&lt;\n        &lt;td&lt;R2C2&lt;\/td&lt;\n        &lt;td&lt;R2C3&lt;\/td&lt;\n        &lt;td&lt;R2C4&lt;\/td&lt;\n      &lt;\/tr&lt;\n      &lt;tr&lt;\n        &lt;td&lt;R3C1&lt;\/td&lt;\n        &lt;td&lt;R3C2&lt;\/td&lt;\n        &lt;td&lt;R3C3&lt;\/td&lt;\n        &lt;td&lt;R3C4&lt;\/td&lt;\n      &lt;\/tr&lt;\n      &lt;tr&lt;\n        &lt;td&lt;R4C1&lt;\/td&lt;\n        &lt;td&lt;R4C2&lt;\/td&lt;\n        &lt;td&lt;R4C3&lt;\/td&lt;\n        &lt;td&lt;R4C4&lt;\/td&lt;\n      &lt;\/tr&lt;\n  &lt;\/table&lt;\n&lt;\/div&lt;\n\n&lt;p&lt;\t\n&lt;input type=\"submit\" name=\"sbt_div_index\" id=\"sbt_div_index\" value=\"Add Green class to DIV with index LT 1 \"&lt;\n\n&lt;input type=\"submit\" name=\"sbt_list_index\" id=\"sbt_list_index\" value=\"Add Green class to List Item with index LT 2\"&lt;\n\n&lt;input type=\"submit\" name=\"sbt_table_cells\" id=\"sbt_table_cells\" value=\"Add Green Class to Table Cell with index LT 3\"&lt;\n\n&lt;\/p&lt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\" &lt;\n\n$(document).ready(function(){\n\n\/\/Add all jQuery code here\n\n});\t\n\n&lt;\/script&lt;<\/pre>\n<h3>Example 1: Add class to all the divs that have an index above index 1 when a button is clicked\u00a0by using the Less Than Selector<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">\t$('#sbt_div_index').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container div:lt(1)').addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 2: Add class to all the last list items that have an index of more than 2 when a button is clicked\u00a0by using the Less Than Selector<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">\t$('#sbt_list_index').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container ul li:lt(2)').addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 3: Add class to all the table cells that have an index of more than 3 when a button is clicked by using the Less Than Selector<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">\t$('#sbt_table_cells').on(\"click\", function(e){\t\t\t\t\n\n\t\t$('.divs_container table td:lt(3)').addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3414\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>Simple, isn&#8217;t it?<\/h5>\n<p>Do you know of any other ways of using the <strong>:lt() selector<\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Using jQuery, it is very easy to select all elements at an index lesser than index within the matched set.\u00a0It can be done by using the jQuery lt selector. In this article, I am going to share different examples on how to use the :lt selector in jQuery.<\/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-3414","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-T4","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3414","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=3414"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3414\/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=3414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}