jQuery.inArray(), how to use it right?

Question

First time I work with jQuery.inArray() and it acts kinda strange.

If the object is in the array, it will return 0, but 0 is false in Javascript. So the following will output: "is NOT in array"

var myarray = [];
myarray.push("test");

if(jQuery.inArray("test", myarray)) {
    console.log("is in array");
} else {
    console.log("is NOT in array");
}

I will have to change the if statement to:

if(jQuery.inArray("test", myarray)==0)

But this makes the code unreadable. Especially for someone who doesn't know this function. They will expect that jQuery.inArray("test", myarray) gives true when "test" is in the array.

So my question is, why is it done this way? I realy dislike this. But there must be a good reason to do it like that.

Dennis · Accepted Answer · 2015-06-03 09:36:08Z

885

inArray returns the index of the element in the array, not a boolean indicating if the item exists in the array. If the element was not found, -1 will be returned.

So, to check if an item is in the array, use:

if(jQuery.inArray("test", myarray) !== -1)

edited Jun 3, 2015 at 9:36

answered Sep 18, 2013 at 8:47

Dennis

14.5k3 gold badges37 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Joshua Pinter Over a year ago

CoffeeScript: if jQuery.inArray('test', myarray) isn't -1

Wesley Smith Over a year ago

Of course, you could always define your own, more intuitive, function like $.isInArray = function(test,array) { return $.inArray(test, array) !== -1; };

Dennis Over a year ago

Or shorter: $.isInArray = function(item, array) { return !!~$.inArray(item, array); }; (I would keep cryptic code like that in a well named function to keep the intention clear though :) )

asherrard Over a year ago

Thanks @Chips_100 for showing us visual learners how to do it right, it'd be nice if jQuery could update to include that in their own example.

MistyDawn Over a year ago

you can also use if( $.inArray(test, array) > -1) { // do stuff }

|

Jon · Accepted Answer · 2013-09-18 08:46:27Z

71

$.inArray returns the index of the element if found or -1 if it isn't -- not a boolean value. So the correct is

if(jQuery.inArray("test", myarray) != -1) {
    console.log("is in array");
} else {
    console.log("is NOT in array");
}

answered Sep 18, 2013 at 8:46

Jon

439k85 gold badges756 silver badges820 bronze badges

Comments

Quixote One · Accepted Answer · 2015-12-02 15:53:56Z

29

The right way of using inArray(x, arr) is not using it at all, and using instead arr.indexOf(x).

The official standard name is also more clear on the fact that the returned value is an index thus if the element passed is the first one you will get back a 0 (that is falsy in Javascript).

(Note that arr.indexOf(x) is not supported in Internet Explorer until IE9, so if you need to support IE8 and earlier, this will not work, and the jQuery function is a better alternative.)

edited Dec 2, 2015 at 15:53

Quixote One

32 bronze badges

answered Jan 8, 2015 at 9:08

6502

115k17 gold badges177 silver badges277 bronze badges

3 Comments

Enrique Moreno Tent Over a year ago

I have to agree. The name of inArray is confusing. It seems it should return a boolean, but it does exactly the same as indexOf

Aluan Haddad Over a year ago

Everytime I $.inArray used at the beginning of some code I have to go fix a bug in, I groan. Anyway, this should be the accepted answer.

David Fariña Over a year ago

This should be the accepted answer. Why would you want to take your pen, drain the blue ink and fill it with red ink when you can use a red marker from the beginning

Community · Accepted Answer · 2020-06-20 09:12:55Z

28

The answer comes from the first paragraph of the documentation check if the results is greater than -1, not if it's true or false.

The $.inArray() method is similar to JavaScript's native .indexOf() method in that it returns -1 when it doesn't find a match. If the first element within the array matches value, $.inArray() returns 0.

Because JavaScript treats 0 as loosely equal to false (i.e. 0 == false, but 0 !== false), if we're checking for the presence of value within array, we need to check if it's not equal to (or greater than) -1.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 18, 2013 at 8:46

Patsy Issa

11.3k5 gold badges57 silver badges76 bronze badges

Comments

Saurabh Solanki · Accepted Answer · 2018-01-10 12:03:12Z

22

instead of using jQuery.inArray() you can also use includes method for int array :

var array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

var pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

check official post here

edited Jan 10, 2018 at 12:03

answered Jan 10, 2018 at 11:41

Saurabh Solanki

2,20420 silver badges31 bronze badges

2 Comments

anoldermark Over a year ago

includes is not supported by IE - :: use indeOf

raza9798 Over a year ago

includes is perfectly working on jquery 3.6

Kevin Bowersox · Accepted Answer · 2013-09-18 08:46:16Z

14

The inArray function returns the index of the object supplied as the first argument to the function in the array supplied as the second argument to the function.

When inArray returns 0 it is indicating that the first argument was found at the first position of the supplied array.

To use inArray within an if statement use:

if(jQuery.inArray("test", myarray) != -1) {
    console.log("is in array");
} else {
    console.log("is NOT in array");
}

inArray returns -1 when the first argument passed to the function is not found in the array passed as the second argument.

answered Sep 18, 2013 at 8:46

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

Jason Watmore · Accepted Answer · 2014-07-17 02:45:30Z

14

Or if you want to get a bit fancy you can use the bitwise not (~) and logical not(!) operators to convert the result of the inArray function to a boolean value.

if(!!~jQuery.inArray("test", myarray)) {
    console.log("is in array");
} else {
    console.log("is NOT in array");
}

answered Jul 17, 2014 at 2:45

Jason Watmore

4,7212 gold badges36 silver badges37 bronze badges

1 Comment

jhrr Over a year ago

The use of bitwise operators is generally forbidden/frowned upon in the common JavaScript coding standards. So if you're using a linter (jshint, eslint etc.) chances are you won't get this through code review. Solution works though.

Sahi Repswal · Accepted Answer · 2020-09-25 13:44:44Z

13

inArray returns the index of the element in the array. If the element was not found, -1 will be returned else index of element.

if(jQuery.inArray("element", myarray) === -1) {
    console.log("Not exists in array");
} else {
    console.log("Exists in array");
}

answered Sep 25, 2020 at 13:44

Sahi Repswal

3406 silver badges14 bronze badges

Comments

DDan · Accepted Answer · 2016-04-20 09:38:18Z

9

I usually use

if(!(jQuery.inArray("test", myarray) < 0))

or

if(jQuery.inArray("test", myarray) >= 0)

answered Apr 20, 2016 at 9:38

DDan

8,3566 gold badges38 silver badges65 bronze badges

1 Comment

MistyDawn Over a year ago

Even better... if( $.inArray("test", myarray) > -1 )

Darvex · Accepted Answer · 2013-09-18 08:46:29Z

4

jQuery.inArray() returns index of the item in the array, or -1 if item was not found. Read more here: jQuery.inArray()

answered Sep 18, 2013 at 8:46

Darvex

3,6542 gold badges26 silver badges39 bronze badges

Comments

Johan · Accepted Answer · 2013-09-18 08:46:37Z

4

It will return the index of the item in the array. If it's not found you will get -1

answered Sep 18, 2013 at 8:46

Johan

35.4k62 gold badges191 silver badges309 bronze badges

Comments

Gustavo Andrade Ferreira · Accepted Answer · 2016-06-20 16:38:28Z

3

If we want to check an element is inside a set of elements we can do for example:

var checkboxes_checked = $('input[type="checkbox"]:checked');

// Whenever a checkbox or input text is changed
$('input[type="checkbox"], input[type="text"]').change(function() {
    // Checking if the element was an already checked checkbox
    if($.inArray( $(this)[0], checkboxes_checked) !== -1) {
        alert('this checkbox was already checked');
    }
}

answered Jun 20, 2016 at 16:38

Gustavo Andrade Ferreira

965 bronze badges

Comments

MistyDawn · Accepted Answer · 2018-07-06 23:07:19Z

$.inArray() does the EXACT SAME THING as myarray.indexOf() and returns the index of the item you are checking the array for the existence of. It's just compatible with earlier versions of IE before IE9. The best choice is probably to use myarray.includes() which returns a boolean true/false value. See snippet below for output examples of all 3 methods.

// Declare the array and define it's values
var myarray = ['Cat', 'Dog', 'Fish'];

// Display the return value of each jQuery function 
// when a radio button is selected
$('input:radio').change( function() {

  // Get the value of the selected radio
  var selectedItem = $('input:radio[name=arrayItems]:checked').val();
  $('.item').text( selectedItem );
  
  // Calculate and display the index of the selected item
  $('#indexVal').text( myarray.indexOf(selectedItem) );
  
  // Calculate and display the $.inArray() value for the selected item
  $('#inArrVal').text( $.inArray(selectedItem, myarray) );
  
  // Calculate and display the .includes value for the selected item
  $('#includeVal').text( myarray.includes(selectedItem) );
});

#results { line-height: 1.8em; }
#resultLabels { width: 14em; display: inline-block; margin-left: 10px; float: left; }
label { margin-right: 1.5em; }
.space { margin-right: 1.5em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Click a radio button to display the output of
&nbsp;<code>$.inArray()</code>
&nbsp;vs. <code>myArray.indexOf()</code>
&nbsp;vs. <code>myarray.includes()</code>
&nbsp;when tested against
&nbsp;<code>myarray = ['Cat', 'Dog', 'Fish'];</code><br><br>

<label><input type="radio" name="arrayItems" value="Cat"> Cat</label>
<label><input type="radio" name="arrayItems" value="Dog"> Dog</label>
<label><input type="radio" name="arrayItems" value="Fish"> Fish</label>  
<label><input type="radio" name="arrayItems" value="N/A"> ← Not in Array</label>
<br><br>

<div id="results">
  <strong>Results:</strong><br>
  <div id="resultLabels">
    myarray.indexOf( "<span class="item">item</span>" )<br>
    $.inArray( "<span class="item">item</span>", myarray )<br>
    myarray.includes( "<span class="item">item</span>" )
  </div>
  <div id="resultOutputs">
    <span class="space">=</span><span id="indexVal"></span><br>
    <span class="space">=</span><span id="inArrVal"></span><br>
    <span class="space">=</span><span id="includeVal"></span>
  </div>
 </div>

It should be noted that $.inArray should be the golden standard if you have access to the jQuery library. Otherwise, JavaScript .indexOf with a polyfill for IE8 should be used instead. Stay away from that modern stuff like .includes().

Hitesh Tripathi · Accepted Answer · 2019-12-25 08:59:34Z

3

var abc = {
      "partner": {
        "name": "North East & Cumbria (EDT)",
        "number": "01915008717",
        "areas": {
        "authority": ["Allerdale", "Barrow-in-Furness", "Carlisle"]
        }
      }
    };
    
    
    $.each(abc.partner.areas, function(key, val){
     console.log(val);
      if(jQuery.inArray("Carlisle", val)) {
        console.log(abc.partner.number);
    }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Dec 25, 2019 at 8:59

Hitesh Tripathi

8542 gold badges12 silver badges25 bronze badges

answered Jan 14, 2019 at 15:49

abhinavsinghvirsen

2,10519 silver badges26 bronze badges

Comments

Сергей Савельев · Accepted Answer · 2017-03-08 13:48:10Z

2

/^(one|two|tree)$/i.test(field) // field = Two; // true
/^(one|two|tree)$/i.test(field) // field = six; // false
/^(раз|два|три)$/ui.test(field) // field = Три; // true

This is useful for checking dynamic variables. This method is easy to read.

answered Mar 8, 2017 at 13:48

Сергей Савельев

3092 silver badges7 bronze badges

Comments

William Hu · Accepted Answer · 2015-10-06 05:15:53Z

1

Just no one use $ instead of jQuery:

if ($.inArray(nearest.node.name, array)>=0){
   console.log("is in array");
}else{
   console.log("is not in array");
}

answered Oct 6, 2015 at 5:15

William Hu

16.3k12 gold badges111 silver badges143 bronze badges

1 Comment

MistyDawn Over a year ago

I'm just curious why? Is there some uncommon compatibility issue this causes? I've never had any kind of issue using the $ instead of jQuery.

score 1 · Accepted Answer · 2017-05-03 20:57:44Z

1

Man, check the doc.

for example:

var arr = [ 4, "Pete", 8, "John" ];
console.log(jQuery.inArray( "John", arr ) == 3);

edited May 3, 2017 at 20:57

answered Feb 7, 2017 at 16:06

user5004526

Comments

Joeneter10 · Accepted Answer · 2018-11-27 10:16:17Z

1

For some reason when you try to check for a jquery DOM element it won't work properly. So rewriting the function would do the trick:

function isObjectInArray(array,obj){
    for(var i = 0; i < array.length; i++) {
        if($(obj).is(array[i])) {
            return i;
        }
    }
    return -1;
}

answered Nov 27, 2018 at 10:16

Joeneter10

111 bronze badge

Comments

Alladin Khan · Accepted Answer · 2024-03-01 06:47:51Z

0

var college_year = [2021,2022,2023, 2024];
var arraylen = college_year.length;
// Use an array to store the dynamic arrays
var year_arrays = [];

for (var i = 0; i < arraylen; i++) {
  if (jQuery.inArray(college_year[i], year_arrays) === -1) {
    year_arrays.push(college_year[i]);
  }
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

edited Mar 1, 2024 at 6:47

answered Feb 29, 2024 at 15:30

Alladin Khan

11 bronze badge

Comments

M Amir Shahzad · Accepted Answer · 2020-06-18 15:54:41Z

-5

the shortest and simplest way is.

arrayHere = ['cat1', 'dog2', 'bat3']; 

if(arrayHere[any key want to search])   
   console.log("yes found in array");

answered Jun 18, 2020 at 15:54

M Amir Shahzad

3283 silver badges17 bronze badges

4 Comments

M Amir Shahzad Over a year ago

can you please share some code, i will check and let you know about it. it should work. i am already doing it

M Amir Shahzad Over a year ago

@RyanArief can you please share some code , I will let you know why its not working.

M Amir Shahzad Over a year ago

var arrayHere = ['cat1', 'dog2', 'bat3']; if(arrayHere[0]) alert("yes found in array"); if(arrayHere[3]) alert("yes found second in array");

Ryan Arief Over a year ago

on the line "if(arrayHere[any key want to search])", you should add some "/' or js would see it as variable.we never know programmer level who search this topic so pls specify more detail on your code.

Collectives™ on Stack Overflow

jQuery.inArray(), how to use it right?

20 Answers 20

8 Comments

Comments

3 Comments

Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

20 Answers 20

8 Comments

Comments

3 Comments

Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related