Post
Ask Question

Check Whether an Array Contains a Particular Element Using jQuery

Introduction

This article shows how to check whether an array element is present in an array. We will be using jQuery for this requirement. I hope you will like it.

Please see this article in my blog here.

Background

I know we are all working on the client-side technologies, especially in jQuery. Sometimes we may need to write more client-side code rather than server-side code. In that case, you will be using client-side arrays too. So if you use client-side arrays, sometimes you may need to check that the array contains a specific element or not. Then only you can do some code according to that. Here I will provide you a demo of how to work on this requirement.

Using the code

To start with, as you all know we need to load the jQuery reference.

  1. <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>  

Once you load the reference you are ready to go.

Since this is a demo, we will explain with a procedure. Sounds good?. So we will do the following tasks.

  • Add the elements to the array
  • Check the elements are added or not
  • Search an element

Shall we start then?

Add the elements to the array.

We need to set our UI first, right?

  1. <body>    
  2. Check whether an array contains a particular element - Sibeesh Passion    
  3.   
  4.     <br/>  
  5.     <br/>  
  6.     <table>  
  7.         <tr>  
  8.             <td>  
  9.                 <input type="text" id="myText" />  
  10.             </td>  
  11.             <td>  
  12.                 <p id="addMe">Add Me</p>  
  13.             </td>  
  14.         </tr>  
  15.         <tr></tr>  
  16.         <tr></tr>  
  17.         <tr></tr>  
  18.         <tr>  
  19.             <td>  
  20.                 <p id="showMe">Show Array Length</p>  
  21.             </td>  
  22.             <td id="showContent">Array length is    
  23. </td>  
  24.         </tr>  
  25.         <tr></tr>  
  26.         <tr></tr>  
  27.         <tr></tr>  
  28.         <tr>  
  29.             <td>  
  30.                 <input type="text" id="searchText" />  
  31.             </td>  
  32.             <td>  
  33.                 <p id="searchMe">Search Me</p>  
  34.             </td>  
  35.             <td id="searchOutput">The given text </td>  
  36.         </tr>  
  37.     </table>  
  38. </body>   

So we have set our UI and now if you run your page you can see the following output:


Now we will add the following scripts.

  1. < script > $(document).ready(function() {  
  2.     var myArray = [];  
  3.     var i = 0;  
  4.     $("#addMe").click(function() {  
  5.         myArray[i] = $("#myText").val();  
  6.         $("#myText").val('');  
  7.         i++;  
  8.     });  
  9.     $("#showMe").click(function() {  
  10.         $("#showContent").text("Array length is " + myArray.length);  
  11.     });  
  12.     $("#searchMe").click(function() {  
  13.         if (jQuery.inArray($("#searchText").val(), myArray) > -1) $("#searchOutput").text("The given text " + $("#searchText").val() + " is available in the array");  
  14.         else $("#searchOutput").text("The given text " + $("#searchText").val() + " is not available in the array");  
  15.     });  
  16. }); < /script>  

As you can see, we are adding elements to the array, checking the array element in the first two click functions. But what about the third click function? Bingo! There we are using a jQuery.inArray function to check our element is present in the array or not.

Now we will learn a little about the jQuery.inArray function.

jQuery.inArray

  • It is used for searching a specified value within an area.
  • It returns -1 if it does not contain the searched value.
  • It returns the index of the searched value if it contains the value.

The following code block describes how to use jQuery.inArray.

  1. if (jQuery.inArray($("#searchText").val(), myArray) > -1)  
  2. $("#searchOutput").text("The given text " + $("#searchText").val() + " is available in the array");  
  3. else  
  4. $("#searchOutput").text("The given text " + $("#searchText").val() + " is not available in the array");  

Complete Code

  1. <html>  
  2.     <head>  
  3.         <title>Check whether an array contains a particular element - Sibeesh Passion</title>  
  4.         <style>    
  5.          p {    
  6.             color: red;    
  7.             width: 170px;    
  8.             cursor: pointer;    
  9.             border: 1px solid #ccc;    
  10.             text-align: center;    
  11.          }    /li>
  12.       </style>  
  13.         <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>  /li>
  14.     </head>  /li>
  15.     <body>    
  16. Check whether an array contains a particular element - Sibeesh Passion    
  17.   
  18.         <br/>  
  19.         <br/>  
  20.         <table>  
  21.             <tr>  
  22.                 <td>  
  23.                     <input type="text" id="myText" />  
  24.                 </td>  
  25.                 <td>  
  26.                     <p id="addMe">Add Me</p>  
  27.                 </td>  
  28.             </tr>  
  29.             <tr></tr>  
  30.             <tr></tr>  
  31.             <tr></tr>  
  32.             <tr>  
  33.                 <td>  
  34.                     <p id="showMe">Show Array Length</p>  
  35.                 </td>  
  36.                 <td id="showContent">Array length is    
  37. </td>  
  38.             </tr>  
  39.             <tr></tr>  
  40.             <tr></tr>  
  41.             <tr></tr>  
  42.             <tr>  
  43.                 <td>  
  44.                     <input type="text" id="searchText" />  
  45.                 </td>  
  46.                 <td>  
  47.                     <p id="searchMe">Search Me</p>  
  48.                 </td>  
  49.                 <td id="searchOutput">The given text </td>  
  50.             </tr>  
  51.         </table>  
  52.         <script>    
  53.         $(document).ready(function() {    
  54.             var myArray = [];    
  55.             var i = 0;    
  56.             $("#addMe").click(function() {    
  57.                 myArray[i] = $("#myText").val();    
  58.                 $("#myText").val('');    
  59.                 i++;    
  60.             });    
  61.             $("#showMe").click(function() {    
  62.                 $("#showContent").text("Array length is " + myArray.length);    
  63.             });    
  64.             $("#searchMe").click(function() {    
  65.                 if (jQuery.inArray($("#searchText").val(), myArray) > -1)    
  66.                 $("#searchOutput").text("The given text " + $("#searchText").val() + " is available in the array");    
  67.                 else    
  68.                 $("#searchOutput").text("The given text " + $("#searchText").val() + " is not available in the array");    
  69.             });    
  70.         });    
  71.         </script>  
  72.     </body>  
  73. </html>  

Now we will run our page and see the output.

Output





That's all.

Conclusion

I hope you will like this article. Please share your valuable thoughts and comments. Your feedback is always welcomed.

Thanks in advance. Happy coding!


Similar Articles