How to optimize Javascript function

Question

I want to make an animation on a div child element when i hover the child of a different div this is my code:

$('.section li:nth-child(1)').hover(function(){
    $('.section2 li:nth-child(1)').toggleClass('is-over');
});
		
$('.section li:nth-child(2)').hover(function(){
    $('.section2 li:nth-child(2)').toggleClass('is-over');
});

$('.section li:nth-child(3)').hover(function(){
    $('.section2 li:nth-child(3)').toggleClass('is-over');
});

$('.section li:nth-child(4)').hover(function(){
    $('.section2 li:nth-child(4)').toggleClass('is-over');
});

So how can i optimize it?

CodeReview is probably a better network for such kind of questions. codereview.stackexchange.com — briosheje
– briosheje, Commented Jun 3, 2016 at 15:14

Munawir · Accepted Answer · 2016-06-03 15:21:08Z

1

You can use $(this).index() to get the index of hovered item

$('.section li').hover(function(){
  var index = $(this).index()+1;
  $('.section2 li:nth-child('+index+')').toggleClass('is-over');
});

.is-over {
  color : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="section">
    <li>Step 1</li>
    <li>Step 2</li>
</ul>

<ul class="section2">
    <li>Step 11</li>
    <li>Step 22</li>
</ul>

answered Jun 3, 2016 at 15:21

Munawir

3,3569 gold badges36 silver badges51 bronze badges

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

Comments

brk · Accepted Answer · 2016-06-03 15:14:41Z

1

This is broad question.

You can create a function like this

function hoverChild(child){
  $('.section li:nth-child('+child+')').hover(function(){
            $('.section2 li:nth-child('+child+')').toggleClass('is-over');
        });
}

and on requirement call this function as

hoverChild(n) where n =1,2,3....

answered Jun 3, 2016 at 15:14

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Jeer · Accepted Answer · 2016-06-03 15:32:49Z

0

$('.section li').hover(function(){
    var num = $(this).index();
    $('.section2 li:nth-child('+num+')').toggleClass('is-over');
});

answered Jun 3, 2016 at 15:32

Jeer

1

Collectives™ on Stack Overflow

How to optimize Javascript function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related