474
votes

Is there any way to execute same code for different elements on the page?

$('.class1').click(function() {
   some_function();
});

$('.class2').click(function() {
   some_function();
});

instead to do something like:

$('.class1').$('.class2').click(function() {
   some_function();
});

Thanks

10

10 Answers

935
votes
$('.class1, .class2').on('click', some_function);

Or:

$('.class1').add('.class2').on('click', some_function);

This also works with existing objects:

const $class1 = $('.class1');
const $class2 = $('.class2');
$class1.add($class2).on('click', some_function);
122
votes

I normally use on instead of click. It allow me to add more events listeners to a specific function.

$(document).on("click touchend", ".class1, .class2, .class3", function () {
     //do stuff
});
42
votes
$('.class1, .class2').click(some_function);

Make sure you put a space like $('.class1,space here.class2') or else it won't work.

19
votes

Simply use $('.myclass1, .myclass2, .myclass3') for multiple selectors. Also, you dont need lambda functions to bind an existing function to the click event.

11
votes

Another alternative, assuming your elements are stored as variables (which is often a good idea if you're accessing them multiple times in a function body):

function disableMinHeight() {
    var $html = $("html");
    var $body = $("body");
    var $slideout = $("#slideout");

    $html.add($body).add($slideout).css("min-height", 0);
};

Takes advantage of jQuery chaining and allows you to use references.

7
votes

If you have or want to keep your elements as variables (jQuery objects), you can also loop over them:

var $class1 = $('.class1');
var $class2 = $('.class2');

$([$class1,$class2]).each(function() {
    $(this).on('click', function(e) {
        some_function();
    });
});
3
votes

We can code like following also, I have used blur event here.

$("#proprice, #proqty").blur(function(){
      var price=$("#proprice").val();
      var qty=$("#proqty").val();
      if(price != '' || qty != '')
      {
          $("#totalprice").val(qty*price);
      }
  });
3
votes

Add a comma separated list of classes like this :

jQuery(document).ready(function($) {

$('.class, .id').click(function() { 

//  Your code

    }

});
1
votes

I have a link to an object containig many input fields, which requires to be handled by the same event. So I simply use find() to get all the inside objects, that need to have the event

var form = $('<form></form>');
// ... apending several input fields

form.find('input').on('change', onInputChange);

In case your objects are one level down the link children() instead find() method can be used.

1
votes

In addition to the excellent examples and answers above, you can also do a "find" for two different elements using their classes. For example:

<div class="parent">
<div class="child1">Hello</div>
<div class="child2">World</div>
</div>

<script>
var x = jQuery('.parent').find('.child1, .child2').text();
console.log(x);
</script>

This should output "HelloWorld".