{"id":3440,"date":"2013-03-27T19:00:22","date_gmt":"2013-03-27T19:00:22","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3440"},"modified":"2013-03-27T19:00:22","modified_gmt":"2013-03-27T19:00:22","slug":"jquery-contains-selector-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-contains-selector-examples\/","title":{"rendered":"jquery :contains() Selector Examples"},"content":{"rendered":"<p>The <em><strong>jQuery contains selector<\/strong><\/em>\u00a0can be used to select all elements that contain the specified text. But in some cases, it may not be useful. In this article, we are going to see examples on how to get around this problem. I am going to share different ways of determining whether an elements (such as div, textbox, textarea, etc.) contains a specifc text, word, value, etc.<\/p>\n<p><!--more--><\/p>\n<h2>How to use the jQuery contains 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=3440\" 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>Let&#8217;s assume that we have few different elements on our web page such as div, paragraph, span, textbox, etc. We will see how to check if each of these elements contain a specified value or not. Here we go:<\/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\"&gt;\n.yellow {\n\tbackground-color: #FFFF99;\n\tborder: 1px solid #FF0;\n}\n.purple {\n\tbackground-color: #9999FF;\n\tborder: 1px solid #90F;\n}\n.blue {\t\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.green {\n\tbackground-color: #D7FFD7;\n\tborder: 1px solid #090;\n}\n.divs_container div {\n\tpadding: 10px;\n\tmargin: 10px;\n}\n&lt;\/style&gt;\n\n&lt;div class=\"divs_container\"&gt;\n\n\t&lt;div id=\"my_div1\" class=\"blue\"&gt;This is MY DIV 1\n\n   \t  &lt;div id=\"my_div2\" class=\"purple red_text\"&gt;This is MY DIV 2\n\n      \t&lt;div id=\"my_div3\" class=\"yellow\"&gt;This is MY DIV 3\n\n        \t&lt;div id=\"my_div4\" class=\"yellow\"&gt;This is MY DIV 4&lt;\/div&gt;    \n\n        &lt;\/div&gt;    \n\n        &lt;div id=\"my_div5\" class=\"yellow\"&gt;This is MY DIV 5&lt;\/div&gt;    \n\n      &lt;\/div&gt;\n\n      &lt;div id=\"my_div6\" class=\"yellow\"&gt;This is MY DIV 6&lt;\/div&gt;    \n\n    &lt;\/div&gt;\n\n\t&lt;p id=\"my_para\" class=\"yellow\"&gt;This is a PARAGRAPH&lt;\/p&gt;    \n\n    &lt;p&gt;  \n\t  &lt;span id=\"my_span\" class=\"yellow\"&gt;This is a SPAN&lt;\/span&gt;        \n    &lt;\/p&gt;    \n\n&lt;p&gt;\n  &lt;a id=\"my_link\" href=\"http:\/\/www.theextremewebdesigns.com\"&gt;This is Link to Extreme Web Designs&lt;\/a&gt;\n\t&lt;\/p&gt;        \n\n    &lt;p&gt;\n\t  &lt;label for=\"first_name\"&gt;Enter First Name&lt;\/label&gt;\n\t\t&lt;input name=\"first_name\" type=\"text\" id=\"first_name\" value=\"John\"&gt;\n    &lt;\/p&gt;\n    &lt;p&gt;\n      &lt;label for=\"message\"&gt;Enter Message&lt;\/label&gt;\n      &lt;br&gt;\n      &lt;textarea name=\"message\" id=\"message\" cols=\"45\" rows=\"5\"&gt;This is default message.&lt;\/textarea&gt;\n    &lt;\/p&gt;        \n\n    &lt;p&gt;\n\n\t&lt;\/p&gt;                \n\n\t&lt;p&gt;&amp;nbsp;&lt;\/p&gt;    \n\n&lt;\/div&gt;\n\n&lt;p&gt;\t\n&lt;input type=\"submit\" name=\"sbt_check_div_contains\" id=\"sbt_check_div_contains\" value=\"Check if DIV contains an Image\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_para_contains\" id=\"sbt_check_para_contains\" value=\"Check if PARA contains the text 'PARAGRAPH'\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_span_contains\" id=\"sbt_check_span_contains\" value=\"Check if SPAN contains the word 'span'\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_link_src_contains\" id=\"sbt_check_link_src_contains\" value=\"Check if Link Source contains the word 'extreme'\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_link_text_contains\" id=\"sbt_check_link_text_contains\" value=\"Check if Link Text contains the word 'extreme'\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_textbox_contains\" id=\"sbt_check_textbox_contains\" value=\"Check if Textbox value contains the word 'John'\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_textarea_contains\" id=\"sbt_check_textarea_contains\" value=\"Check if Textarea value contains the word 'Super'\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_string_contains\" id=\"sbt_check_string_contains\" value=\"Check if string contains the word 'Excellent' \"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_array_contains\" id=\"sbt_check_array_contains\" value=\"Check if ARRAY contains element 'Orange'\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_contains_class\" id=\"sbt_check_contains_class\" value=\"Check if MY DIV 1 contains Class 'red' \"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_not_contains\" id=\"sbt_check_not_contains\" value=\"Check if MY DIV 1 does NOT contain class 'blue' \"&gt;\n\n&lt;\/p&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\n\n\/\/Add jQuery code here\n\n});\t\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 1: Check if a div contains an image when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">\t$('#sbt_check_div_contains').on(\"click\", function(e){\t\t\t\n\n\t\tif( $('.divs_container #my_div1').find(\"img\").length &gt; 0 )\n\t\t{\n\t\t\talert('DIV 1 contains an image.');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('DIV 1 DOES NOT contain an image.');\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 2: Check if a paragraph tag contains the text &#8216;PARAGRAPH&#8217; when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">\t$('#sbt_check_para_contains').on(\"click\", function(e){\t\t\n\n\t\tif( $('.divs_container #my_para:contains(\"PARAGRAPH\")') )\n\t\t{\n\t\t\talert('Paragraph contains the text PARAGRAPH.');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Paragraph DOES NOT contain the text PARAGRAPH.');\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 3: Check if a\u00a0span tag contains the text &#8216;span&#8217; when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">\t$('#sbt_check_span_contains').on(\"click\", function(e){\t\t\n\n\t\tif( $('.divs_container #my_span:contains(\"span\")') )\n\t\t{\n\t\t\talert('Span contains the text \"span\" (but in uppercase).');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Span DOES NOT contain the text \"span\".');\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 4: Check if a hyperlink href source contains the text &#8216;extreme&#8217; when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 4\">\t$('#sbt_check_link_src_contains').on(\"click\", function(e){\t\t\n\n\t\tvar link_src = $('#my_link').attr(\"href\");\t\t\t\n\n\t\tif (link_src.indexOf('extreme') != -1) \t\t\n\t\t{\n\t\t\talert('Link Source contains the text \"extreme\"');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Link Source DOES NOT contain the text \"extreme\".');\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 5: Check if a\u00a0hyperlink text contains the text &#8216;extreme&#8217; when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 5\">\t$('#sbt_check_link_text_contains').on(\"click\", function(e){\t\t\n\n\t\tvar link_text = $('#my_link').text();\n\n\t\tif (link_text.indexOf('extreme') != -1) \t\t\n\t\t{\n\t\t\talert('Link Text contains the text \"extreme\" as it is case-sensitive');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Link Text DOES NOT contain the text \"extreme\".');\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 6: Check if a\u00a0textbox value contains the word &#8216;John&#8217; when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 6\">\t$('#sbt_check_textbox_contains').on(\"click\", function(e){\t\t\t\t\n\n\t\tvar textbox_val = $('#first_name').val();\n\n\t\tif (textbox_val.indexOf('John') != -1) \t\t\n\t\t{\n\t\t\talert('Textbox Value contains the text \"John\"');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Textbox Value DOES NOT contain the text \"John\".');\t\n\t\t}\t\t\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 7: Check if a\u00a0textbox value contains the word &#8216;Super&#8217; when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 7\">\t$('#sbt_check_textarea_contains').on(\"click\", function(e){\t\t\n\n\t\tvar textarea_val = $('#message').val();\n\n\t\tif (textarea_val.indexOf('Super') != -1) \t\t\n\t\t{\n\t\t\talert('Textarea Value contains the text \"Super\"');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Textarea Value DOES NOT contain the text \"Super\".');\t\n\t\t}\t\t\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 8: Check if a\u00a0String contains the word &#8216;Excellent&#8217; when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 8\">\t$('#sbt_check_string_contains').on(\"click\", function(e){\t\t\n\n \t\tvar my_string = 'This is a custom string.';\n\n\t\tif (my_string.indexOf('Excellent') != -1) \t\t\n\t\t{\n\t\t\talert('String contains the text \"Excellent\"');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('String DOES NOT contain the text \"Excellent\".');\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 9: Check if an array contains the element\/item\/value &#8216;Orange&#8217; when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 9\">\t$('#sbt_check_array_contains').on(\"click\", function(e){\t\t\n\n\t\tvar fruits_array = new Array('Apple', 'Mango', 'Grapes');\n\n\t\tvar search_for = 'Orange';\n\n\t\tif( $.inArray(search_for, fruits_array) &gt; -1) \n\t\t{\n\t\t\talert('Value \"Orange\" is available in Array.');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Value \"Orange\" is NOT available in Array.');\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 10: Check if My Div 1 contains the class &#8216;red&#8217; when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 10\">\t$('#sbt_check_contains_class').on(\"click\", function(e){\t\t\t\t\t\t\n\n\t\tif( $('.divs_container #my_div1').hasClass('red') ) \n\t\t{\n\t\t\talert('My Div 1 has the \"red\" class.');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('My Div 1 DOES NOT has the \"red\" class.');\t\n\t\t}\t\t\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 11: Check if\u00a0My Div 1 does NOT contain the class &#8216;blue&#8217; when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 11\">\t$('#sbt_check_not_contains').on(\"click\", function(e){\t\t\n\n\t\tif( !$('.divs_container #my_div1').hasClass('blue') ) \n\t\t{\n\t\t\talert('My Div 1 DOES NOT has the \"blue\" class.');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('My Div 1 has \"blue\" class.');\t\n\t\t}\t\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=3440\" 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>That&#8217;s it!<\/h5>\n<p>Do you know of any other ways to use the <em><strong>jQuery :contains selector<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The jQuery contains selector\u00a0can be used to select all elements that contain the specified text. But in some cases, it may not be useful. In this article, we are going to see examples on how to get around this problem. I am going to share different ways of determining whether an elements (such as div, [&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-3440","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-Tu","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3440","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=3440"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3440\/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=3440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}