Jquery how to test if current hovered div is eq(x)

Question

Hi all!

I am trying to create a jQuery hover function that will highlight a different section of the page depending on what number EQ (index position number) the div is.

What I want to do is say "when you hover over the #photoContent div, check what it's EQ number is. If it's the Xth div, then highlight the Yth p in the sidebar"

    $('#photoContent div').hover(function () {  
        if( $(this).filter(':lt(5)') ) {
            $('#photoSidebar').find('p:eq(0)').addClass('currentPhoto');
        }

        if( $(this).filter(':gt(5)') ) {
            $('#photoSidebar').find('p:eq(1)').addClass('currentPhoto');
        }
    }, function () {
        $('#photoSidebar').find('p').removeClass('currentPhoto');
    });

The above code obviously does not accomplish this, but the concept/functionality is what I'm going for. Thanks for your help!

Answer 1

First, hoverIntent is not a built-in jQuery event. Do you mean hover(fnOver, fnOut) ?

Second, you could rewrite the if statements to explicitly test for a match:

if($(this).is(":lt(5)")) { 
    $('#photoSidebar p').eq(0).addClass('currentPhoto');
}

if($(this).is(":gt(5)")) {
    $('#photoSidebar p').eq(1).addClass('currentPhoto');
} 

OR

var idx = $(this).index();
if(idx > 5) { 
    $('#photoSidebar p').eq(0).addClass('currentPhoto');
}

if(idx < 5) {
    $('#photoSidebar p').eq(1).addClass('currentPhoto');
} 

Also, this is just my style, but why not use regular quotes " instead of single quotes?

Answer 2

I'm not sure why your code doesn't work, other than the user of hoverIntent as Jeff pointed out, but it's a tad convoluted given that it's all in the same document, couldn't you go with:

$('#photoContent div').hover(function () {    
    if( $(this).filter(':lt(5)') ) {
        $('#photoSidebar p:eq(0)').addClass('currentPhoto');
    }

    if( $(this).filter(':gt(5)') ) {
        $('#photoSidebar p:eq(1)').addClass('currentPhoto');
    }

    $('#photoSidebar p').removeClass('currentPhoto');
});

I'm not sure why that last bit was a function either, since you probably want it to only fire when it's hovered.

I'm not sure the above will work, as I'm very unfamiliar with the filter() method, but it looks about right. does it get you closer?

Answer 3

I Believe I found what I was looking for, using the index() property:

    var divIndex = $(this).index();
        if (divIndex<=4) {
              //...
        }

This helped: http://stackoverflow.com/questions/1188760/in-jquery-how-do-you-find-out-the-eq-of-an-element-of-what-is-being-clicked