iterate through hover on array jquery

Question

I have an array of badges...

[<div class="badge"></div>, <div class="badge"></div>, <div class="badge"></div>]

and an array of arrows...

[<div class="arrow"></div>, <div class="arrow"></div>, <div class="arrow"></div>]

I'm trying to get the arrows to display when I hover over the badge so I have something like

$('.badge').hover(function() {
    $('.arrow').show();
}, function() {
    $('.arrow').hide();
});

I'm trying to isolate each individual badge and arrow to hover independently, but I can't seem to isolate it by $('.badge').first() or $('.arrow')[0]

This is the desired result at this website, but I want to do so without having to use so many specific classes like badge1, badge2, badge3, and arrow1, arrow2, arrow3.

HTML

<div class="badge badge1 margin_right">  
    <div class="arrow arrow1 right" style="display: none;"></div>
    <img src="images/logo-bc.png" alt="basecamp"/>
    <h3><a href="#">Basecamp</a><span>®</span></h3>
    <h4>Manage Projects</h4>
    <p>Used by millions for project management.</p>
</div>

Arun P Johny · Accepted Answer · 2014-06-06 05:28:09Z

1

In your case the arrow is an descendant of the badge element, so what you need is to change the display of the arrow inside the badge when you hover a badge.

So

$('.badge').hover(function () {
    $(this).find('.arrow').show();
}, function () {
    $(this).find('.arrow').hide();
});

answered Jun 6, 2014 at 5:28

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

Ben10 · Accepted Answer · 2014-06-06 05:36:08Z

0

This might help you-

$.each([arr1, arr2], function() {
$.each(this, function(i, v) {
    // do something
});
});

answered Jun 6, 2014 at 5:36

Ben10

471 gold badge1 silver badge5 bronze badges

Collectives™ on Stack Overflow

iterate through hover on array jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related