Question

I’m not sure how to fix it, but I always get -1 when using inArray(). To be more explicit, here’s what I’m doing :

<!-- HTML Markup -->

<nav class="navigation clearfix">
    <a class="home-anchor" data-class="home-anchor" href="#">
        <span class="icons-wrapper">
            <i class="icon-normal-state"></i>
            <i class="icon-active-state"></i>
        </span>
        <span class="anchor-text">Home</span>
    </a>
    <a class="about-anchor" data-class="about-anchor" href="#">
        <span class="icons-wrapper">
            <i class="icon-normal-state"></i>
            <i class="icon-active-state"></i>
        </span>
        <span class="anchor-text">About</span>
    </a>
    <a class="work-anchor" data-class="work-anchor" href="#">
        <span class="icons-wrapper">
            <i class="icon-normal-state"></i>
            <i class="icon-active-state"></i>
        </span>
        <span class="anchor-text">Work</span>
    </a>
    <a class="shop-anchor" data-class="shop-anchor" href="#">
        <span class="icons-wrapper">
            <i class="icon-normal-state"></i>
            <i class="icon-active-state"></i>
        </span>
        <span class="anchor-text">Shop</span>
    </a>
    <a class="services-anchor" data-class="services-anchor" href="#">
        <span class="icons-wrapper">
            <i class="icon-normal-state"></i>
            <i class="icon-active-state"></i>
        </span>
        <span class="anchor-text">Services</span>
    </a>
    <a class="contact-anchor" data-class="contact-anchor" href="#">
        <span class="icons-wrapper">
            <i class="icon-normal-state"></i>
            <i class="icon-active-state"></i>
        </span>
        <span class="anchor-text">Contact</span>
    </a>
</nav>

/* JavaScript Markup */

var anchors = $(this.cluster_navigation_class).children();
var anchor = (jQuery.inArray(data, anchors) == -1) ? anchors[0] : jQuery.inArray(data, anchors);

Where this.cluster_navigation_class is .navigation, and data is .about-anchor. The JavaScript statement above always returns -1 when I check in console, why is that happening ? Shouldn’t it return the index 1 because the class exists at the index 1, or am I wrong ?

Answer 1

You are using inArray wrong. You are comparing a string to a list of elements. jQuery can not magically know what you want to do.

Do you realize you contrdict yourself in your post. One place you are saying checking data and next place you are saying checking class. The data and class are just repeated, so I am not sure what is the problem using either of them.

You should be using find to select the element inside of the navigation element.

var myLink = jQuery(".navigation").find('[data-class="about-anchor"]');

Another way to use filter:

var links = jQuery(".navigation a");
var activeElem = links.filter( function(){ return jQuery(this).data()==="about-anchor"; } ); 
var myLink = activeElem.length===1 ? activeElem : links.eq(0);

or with the class

var links = jQuery(".navigation a");
var activeElem = links.filter(".about-anchor");
var myLink = activeElem.length===1 ? activeElem : links.eq(0);