Question

$(function(){
    $(".nav ul li").each(function(e){
        $(this).mouseover(function(){
            $(".subnav .left div:not(:eq("+e+"))").hide();
            $(".subnav .left div").eq(e).show();
        })
    })
})

what’s div:not(:eq("+e+"))")meaning in the above code? i don’t know why it use two + in the parenthesis? could i use div:not(:eq(e))") to instead of it? thank you.

Answer 1

In JavaScript, + is used to add two things together.

In this case, it’s adding strings.

This:

".subnav .left div:not(:eq("+e+"))"

Means adding three strings to become one:

1. .subnav .left div:not(:eq(
2. e
3. ))

The final result is the value of e added to the jQuery selector, e being the index of the currently iterated element.

The outcome of this whole thing in simple words is: when mouse is over specific list item, hide all <div> elements under .subnav .left except the <div> in same index as the hovered list item.

Edit: You can avoid the messy code and dump the + by having such code instead:

$(".subnav .left div").not(function(index) {
    return (index === e);
}).hide();

More lines, but also more elegant as you show the logic inside a function, not a string.