Combine multiple small jQuery scripts into one

Question

I have few repeating jQuery scripts that I combined into one for better performance, but I am still not happy and I am sure there is an easier way of doing this.

$(document).ready(function(){
$('div.wrap-around1 *').addClass('outer1');
$('div.outer1').wrapAll('<div class="frame-h" />');
$('div.wrap-around2 *').addClass('outer2');
$('div.outer2').wrapAll('<div class="frame-v" />');
$('div.wrap-around3 *').addClass('outer3');
$('div.outer3').wrapAll('<div class="frame-v" />');
$('div.wrap-around4 *').addClass('outer4');
$('div.outer4').wrapAll('<div class="frame-b" />');
});

* is slooooooooow, really slow selector. Are you sure * is really needed? Without seeing your HTML any answer here is just guesswork. — Roko C. Buljan
– Roko C. Buljan, Commented Jan 26, 2018 at 23:57

Roko C. Buljan · Accepted Answer · 2018-01-27 00:38:17Z

1

The Universal Selector * is slow, (not much in CSS but) when used in JS. So probably you can use some right selectors, classes or something (cannot say without any HTML sample or in-depth description).

But your code can be refactored to:

Extract the number out of your class
Map Numbers to h, v, b characters

const num2Frame = {1:"h", 2:"v", 3:"v", 4:"b"}; // map class num to frame char


jQuery(function ($) { // DOM ready and $ alias secured

  $("[class^='wrap-around'], [class*=' wrap-around']").each(function() {
  
       // extract number from className
       const num = (this.className.match(/wrap-around(\d+)/)||'')[1];
       if (!num) return;
       $(this).find("*")  //instead of * use a specific selector
           .wrapAll(`<div class="frame-${num2Frame[num]}" />`)
           .addClass('outer'+ num); 
  });

});

.outer1{color: green;}
.outer2{color: gold;}
.outer3{color: gold;}
.outer4{color: red;}

.frame-h{ border: 1px solid green; }
.frame-v{ border: 1px solid gold; }
.frame-b{ border: 1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="asd wrap-around1 qwe sdfg"><p>1</p></div>

<div class="asd wrap-around2 qwe sdfg"><p>2</p></div>

A total improvement would be refactoring your selectors and HTML and use the right tools for the job:

const num2Frame = {1:"h", 2:"v", 3:"v", 4:"b"}; // map class num to frame char


jQuery(function ($) { // DOM ready and $ alias secured

  $("[data-wrap]").each(function() {
       const num = $(this).data("wrap");
       $(this).children()
           .wrapAll(`<div class="frame-${num2Frame[num]}" />`)
           .addClass('outer'+ num); 
  });

});

.outer1{color: green;}
.outer2{color: gold;}
.outer3{color: gold;}
.outer4{color: red;}

.frame-h{ border: 1px solid green; }
.frame-v{ border: 1px solid gold; }
.frame-b{ border: 1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-wrap="1"><p>1</p></div>
<div data-wrap="2"><p>2</p></div>

edited Jan 27, 2018 at 0:38

answered Jan 27, 2018 at 0:21

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

2 Comments

Radi Over a year ago

@RokoCBuljan here's the jsfiddle.net/3ryokxkt but for some reason the js does not work there, anyways, you can see the html and get the idea. The frame-h,frame-v and frame-b classes add background color with border around, all over background image, hence the need for the extra wrapping div to cover Title and Link together. with one pseudo class creating bg and border around it. I hope it is now much clearer.

Roko C. Buljan Over a year ago

@Radi Just like in my example above, same for your example - seems to work quite well: jsfiddle.net/RokoCB/3ryokxkt/1 ( just added the missing jQuery library and - well, the suggested code)

Collectives™ on Stack Overflow

Combine multiple small jQuery scripts into one

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related