Optimizing Javascript

Question

I'm working on an app with six similar sections on the homepage. I have the app working but I had to repeat the block of code below:

The only thing different on each instance is id: #grid and id: #close as this ids vary on each of the six sections.

I try to clean this up by having line:

var $grid = $( '#grid4', '#grid2', '#grid3' ..... ),

and

$close = $( '#close', '#close2', '#close3', .....),

The previous prevents sections from loading on browser.

Here is the block of code that is being repeated:

$(function() {

    var $grid = $( '#grid' ),
      $name = $( '.name' ),
      $close = $( '#close' ),
      $loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore( $grid ),
      stapel = $grid.stapel( {
        onLoad : function() {
          $loader.remove();
        },
        onBeforeOpen : function( pileName ) {
          $name.html( pileName );
        },
        onAfterOpen : function( pileName ) {
          $close.show();
        }
      } );

    $close.on( 'click', function() {
      $close.hide();
      $name.empty();
      stapel.closePile();
    } );

} );

How can I improve the code so I don't have to repeat the previous block? (keeping in mind that I do need to keep different ids as I need each section to behave independently)

@RobG Thought it was obvious given the tilte and explanation. I will edit and add question. Can you undo vote down? — irm
– irm, Commented Oct 8, 2013 at 4:27
—not my down vote, thanks for adding a question. The subject is usually just an attention grabber, you should try to be explicit with what you are trying to achieve (as you've done) in the actual post. "Optimising" means different things to different people (faster, less code, more maintainable, etc.). I'll give you +1 for your trouble. :-) — RobG
– RobG, Commented Oct 8, 2013 at 4:50
you should make a plugin based on an element then access each close/grid from that element within the plugin (& use class in html)would show you if you show your html structure — mikakun
– mikakun, Commented Oct 8, 2013 at 5:52

Rohan Kumar · Accepted Answer · 2013-10-08 04:35:50Z

1

You can use class instead of id to make common for all elements like

$grid = $( '.grid'),

And

$close = $( '.close')

Your html should be like,

<div class="grid">
    <!-- your html -->
    <div class="close">Close</div>
</div>

Now close is the child of grid class you can extract it by using find()

edited Oct 8, 2013 at 4:35

answered Oct 8, 2013 at 4:21

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

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

2 Comments

irm Over a year ago

I need each section to behave independtly therfore I need different id

irm Over a year ago

Using classes didn't do it and only first section loads.

Arun P Johny · Accepted Answer · 2013-10-08 04:20:58Z

0

You can use multiple-selector

var $grid = $( '#grid4, #grid2, #grid3' ..... )

answered Oct 8, 2013 at 4:20

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

2 Comments

irm Over a year ago

I just try. Sections still not loading on browser :/

Fernando Over a year ago

Irm, note that there is only one argument in the function call. In your code there are several arguments separated by a comma, which is not correct I think.

topher · Accepted Answer · 2013-10-08 04:25:01Z

0

You can use variables to make up selectors

 for (var i=0; i<6; i++) {
     $('#grid' + i).....
     // will be #grid0, #grid1, #grid2, etc
 }

answered Oct 8, 2013 at 4:25

topher

1,3974 gold badges17 silver badges41 bronze badges

Comments

Thanos · Accepted Answer · 2013-10-08 04:27:28Z

0

Create an array and loop through it.

var grid= ["#grid4","#grid2","#grid3"];
for (var i = 0; i < grid.length; i++) {
    //The rest of your code goes here goes here
}

answered Oct 8, 2013 at 4:27

Thanos

3,0592 gold badges16 silver badges30 bronze badges

1 Comment

irm Over a year ago

Wouldn't this make the code run for all id simultaneously? It should run independently for the specific section selected by the user.

Collectives™ on Stack Overflow

Optimizing Javascript

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related