Get object index by name containing string

Question

I have a JS array made with jQuery toArray() method containing all li elements from a div. Now I try to get the index of the array containing a certain string: showing.

I have tried .index, .filter, but it all gives me the same error message,

arraySlides.index is not a function
logic.js:218 Uncaught TypeError: showing is not a function

This is my array:

[li.slide.showing, li.slide, li.slide]
0:li.slide.showing
1:li.slide
2:li.slide
length:3
__proto__:Array(0)

Is it not working because I try to find a string?

var current = arraySlides.index('showing');

Ok maybe I wasn't clear. I am trying to get the index, so a number from which position in the array the classname contains showing..

The method is called indexOf, not index. However, filter is an extant method, so I'm surprised that you see a not-a-function error for that, unless you're using an old browser. — apsillers
– apsillers, Commented Apr 26, 2017 at 19:08

Mike Cluck · Accepted Answer · 2017-04-26 19:22:54Z

4

I don't believe you're seeing filter is not a function. You're probably seeing something more like showing is not a function.

[].filter('showing')

That's because filter accepts a predicate function. You need to pass a function which returns true for the items you want. Here's what you probably want:

let listItems = $('li').toArray();
let showing = listItems.filter(li => li.classList.contains('showing'));
console.log(showing);

// Or if you want to get it out of the array
console.log(showing[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>hidden</li>
  <li>hidden</li>
  <li class="showing">showing</li>
  <li>hidden</li>
  <li>hidden</li>
</ul>

Rewritten in ES5:

var listItems = $('li').toArray();
var showing = listItems.filter(function(li) {
  return li.classList.contains('showing');
});
console.log(showing);

// Or if you want to get it out of the array
console.log(showing[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>hidden</li>
  <li>hidden</li>
  <li class="showing">showing</li>
  <li>hidden</li>
  <li>hidden</li>
</ul>

If you want the index of an element, you can use findIndex which also takes a predicate method:

var listItems = $('li').toArray();
var showingIndex = listItems.findIndex(function(li) {
  return li.classList.contains('showing');
});
console.log(showingIndex);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>hidden</li>
  <li>hidden</li>
  <li class="showing">showing</li>
  <li>hidden</li>
  <li>hidden</li>
</ul>

edited Apr 26, 2017 at 19:22

answered Apr 26, 2017 at 19:09

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

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

3 Comments

Kuubs Over a year ago

Thanks for this extensive answer, but I needed to search classnames, like in the answer below. Still giving you some points because this answer is rock solid

Mike Cluck Over a year ago

@HuubS Updated. Includes how to get the index towards the end.

Kuubs Over a year ago

Awesome, but I get the classname out of it, is it also possible to get the position in the array (so 1, 2, etc)?

Piyush · Accepted Answer · 2017-04-26 19:08:05Z

2

You should be using the indexOf() Method.

var current = arraySlides.indexOf('showing');

Just so you know, the indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present. The syntax is like below

arr.indexOf(searchElement)

or

arr.indexOf(searchElement, fromIndex)

answered Apr 26, 2017 at 19:08

Piyush

1,1629 silver badges17 bronze badges

Comments

ProgrammerV5 · Accepted Answer · 2017-04-26 19:12:18Z

1

var arr = $('li').toArray();
console.log(arr);

console.dir(searchStringInArray('showing',arr));

function searchStringInArray (str, strArray) {
    for (var j=0; j<strArray.length; j++) {
        if ( String(strArray[j]).indexOf(str) ) return strArray[j];
    }
    return -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="slide showing">One</li>
<li class="slide">Two</li>
<li class="slide">Three</li>

https://jsfiddle.net/HappyiPhone/exbnpvh1/

answered Apr 26, 2017 at 19:12

ProgrammerV5

1,9722 gold badges12 silver badges23 bronze badges

Comments

Shekhar Chikara · Accepted Answer · 2017-04-26 19:14:57Z

0

I am just providing you a way to get the index of the elements of your array containing the substring showing, since the other answers here seem to be giving you a way of searching for the whole string in array.

var values = ["li.slide", "li.slide.showing", "li.slide"];

$.each(values, function(index, value) {
	if(value.includes('showing')) {
            console.log("Found at index:"+index);
    }
});

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

answered Apr 26, 2017 at 19:14

Shekhar Chikara

3,8322 gold badges32 silver badges53 bronze badges

Collectives™ on Stack Overflow

Get object index by name containing string

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related