I'm trying to use inarray but its always returning true? Any ideas? (all li's are showing)
$("#select-by-color-list li").hide();
// get the select
var $dd = $('#product-variants-option-0');
if ($dd.length > 0) { // make sure we found the select we were looking for
// save the selected value
var selectedVal = $dd.val();
// get the options and loop through them
var $options = $('option', $dd);
var arrVals = [];
$options.each(function(){
// push each option value and text into an array
arrVals.push({
val: $(this).val(),
text: $(this).text()
});
});
};
//This is where it is returning true...
if($.inArray('Aqua', arrVals)) {
$("#select-by-color-list li#aqua").show();
};
if($.inArray('Army', arrVals)) {
$("#select-by-color-list li#army").show();
};
The jQuery inArray() method is used to find a specific value in the given array. If the value found, the method returns the index value, i.e., the position of the item. Otherwise, if the value is not present or not found, the inArray() method returns -1. This method does not affect the original array.
1) Using jQuery If you are someone strongly committed to using the jQuery library, you can use the . inArray( ) method. If the function finds the value, it returns the index position of the value and -1 if it doesn't.
We can use jQuery's isEmptyObject() method to check whether the array is empty or contains elements. The isEmptyObject() method accepts a single parameter of type Object, which is the object to be checked and returns a boolean value true if the object is empty and false if not empty.
You need to do this:
if( $.inArray('Aqua', arrVals) > -1 ) {
or this:
if( $.inArray('Aqua', arrVals) !== -1 ) {
The $.inArray()
method returns the 0
based index of the item. If there's no item, it returns -1
, which the if()
statement will consider as true
.
From the docs:
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.
EDIT: Instead of pushing both values into the array as an object, just use one or the other, so you have an Array of strings from which you can build a multiple selector.
One way is like this:
// Create an Array from the "value" or "text" of the select options
var arrVals = $.map( $dd[0].options, function( opt, i ){
return opt.value || opt.text;
});
// Build a multiple selector by doing a join() on the Array.
$( "#" + arrVals.join(',#') ).show();
If the Array looks like:
['Army','Aqua','Bread'];
The resulting selector will look like:
$( "#Army,#Aqua,#Bread" ).show();
ES6 to the rescue! Although not jQuery I thought worth answering for future readers...
ES6 introduces .includes()
which works as you think $.inArray
SHOULD work:
const myArray = ["a", "b", "c"];
console.log(myArray.includes("a")) /* true */
console.log(myArray.includes("d")) /* false */
Array.prototype.includes()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With