Combine Two identical jQuery functions except they use different selectors and classes

Question

I have two functions that do the same thing, except the element I am targeting is different and so is the ID I want to add. What is the best way to combine these into a single function?

  <script>
      $('.Index-page--has-image[id*="angle-right"]').each(function(){
        var index = $(this).index('.Index-page--has-image')
        $('.Parallax-host .Parallax-item').eq(index).attr('id','angle-right');
      });
        $('.Index-page--has-image[id*="angle-left"]').each(function(){
        var index = $(this).index('.Index-page--has-image')
        $('.Parallax-host .Parallax-item').eq(index).attr('id','angle-left');
      });
    </script>

r043v · Accepted Answer · 2021-06-17 20:12:57Z

1

['left','right'].forEach( way => {
    way = 'angle-' + way ;
    $('.Index-page--has-image[id*="'+way+'"]').each(function(){
        var index = $(this).index('.Index-page--has-image');
        $('.Parallax-host .Parallax-item').eq(index).attr('id',way);
    });
} );

answered Jun 17, 2021 at 20:12

r043v

1,8691 gold badge15 silver badges25 bronze badges

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

Comments

Ben.S · Accepted Answer · 2021-06-17 19:52:18Z

0

Extract the function outside the JQ each function, and pass the angle value to the function parameter, like this

function yourFunctionName(element, idValue){
  let index = $(element).index('.Index-page--has-image')
  $('.Parallax-host .Parallax-item').eq(index).attr('id', idValue);
}
 $('.Index-page--has-image[id*="angle-right"]').each(function(){
     yourFunctionName(this, 'angle-right');
  });
  $('.Index-page--has-image[id*="angle-left"]').each(function(){
     yourFunctionName(this, 'angle-left');
  });

answered Jun 17, 2021 at 19:52

Ben.S

7561 gold badge7 silver badges26 bronze badges

1 Comment

Chris S-E Over a year ago

Is this slightly more performant than what I had? I assumed combining them would be beneficial somehow.

Collectives™ on Stack Overflow

Combine Two identical jQuery functions except they use different selectors and classes

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related