3

pretty simple question here: is there a better way to write this code?

$('.icMenu span.menu').each(function() {
     // do something
});

$('.icMenu span.menu').click(function() {
    // do something else
});

I'm using the same selector twice, is there a better way I should be writing this?

Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
Ollie Clark
  • 141
  • 2
  • 11
  • 1
    For doing different stuff on different events, it is the best think to write them seperately. So I think what you have done is correct. – Bhushan Kawadkar Jun 18 '14 at 10:07
  • Possible duplicate of http://stackoverflow.com/questions/8608145/jquery-on-method-with-multiple-event-handlers-to-one-selector – webketje Jun 18 '14 at 10:20
  • 1
    @Bhushan Kawadkar: You should always avoid running the same selector multiple times if you can, so no, it is not "correct". – iCollect.it Ltd Jun 18 '14 at 10:31

4 Answers4

6

Options:

Use chaining as already suggested

$('.icMenu span.menu').each(function() {
     // do something
}).click(function() {
    // do something else
});

Or simply use a local variable to avoid running the jQuery selector twice:

var $menus = $('.icMenu span.menu');
$menus.each(function() {
     // do something
});
$menus.click(function() {
    // do something else
});

Basic rule:

The key is to always avoid running the selector more than once as that has a large overhead.

Delegated Events:

If your elements are ever dynamically created, you would move the click to a delegated on event handler anyway, so your question would become a non-issue (they would be the same selector, but separated in time):

$(document).on('click', '.icMenu span.menu', function(){
     // Do something on dynamically created elements
});

In a delegated event handler, the selector is only run after the event is caught on an ancestor (in this case document). The function is then applied to any matching elements that caused the event.

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
1

Make use of chaining,

$('.icMenu span.menu').each(function() {
     // do something
}).click(function() {
    // do something else
});
Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
  • Just wondering, why use `.each` when jQuery automatically applies the method to all elements in a class or tag selector? Or is that only the case with the `.on` method? – webketje Jun 18 '14 at 10:17
  • 2
    @Tyblitz For example if you want to manipulate anything with each elements then in that context we have to use .each() – Rajaprabhu Aravindasamy Jun 18 '14 at 10:28
0
 $('.icMenu span.menu').each(function(){
    //do something
}).click(function(){
    //do something
})
daarkfish
  • 81
  • 9
0

If your function has different names I found this solution easier

$('.icMenu span.menu').click(function 
    RunA() {
    }
    RunB() {
    }
);

This can help enable you to run Javascript normally in a JQuery file like If else Statements. Although it may not be very practical in your case, but if you use if else in one function, it can make you run two different functions in one. for example

$('.icMenu span.menu')
    .click(function 
        Run() {
            if($('.icMenu span.menu').css('display') == 'none'){
                alert("This element is hidden!")
            }
            else {
                alert("This element is visible!")
            }
        }
    )
;

You can replace the conditions as you need, but after all it is an example on how it is broken down (in my opinion).

Gareth Compton
  • 159
  • 1
  • 12
  • I forgot entirely what alert is if i needed to add " ; " at the end to make it work. But the whole Jquery multi function can be broken down a bit further. The click and Each are conditions before functions, and functions themselves can be identified singular with client condition. – Gareth Compton Apr 13 '16 at 15:31
  • ignore the top part, tested it was false. but the bottom one works. Sadly you cannot have more than one function name with one function tag. – Gareth Compton Apr 13 '16 at 18:18