Apply same function to multiple ids

Question

Is there anyway I can simplify this JS:

$('#collapse_notebook').on('hide.bs.collapse', function () {
  $('#notebook-caret').removeClass( "fa-caret-up" );
  $('#notebook-caret').addClass( "fa-caret-down" );
})

$('#collapse_note').on('hide.bs.collapse', function () {
  $('#note-caret').removeClass( "fa-caret-up" );
  $('#note-caret').addClass( "fa-caret-down" );
})

You can use chaining like mentioned below. Depending on your markup, it could be possible to simplify it further also. Like for example if the element whose class is removed/added is a child of the selector on which the operation is done etc. — Harry, Aug 02 '14 at 06:42

score 3 · Accepted Answer · edited May 23 '17 at 10:33

Multiple selector Chaining is the word: :)

How this is done: demo http://jsfiddle.net/49NBu/ (shows the extracting bit)

Extract the id and use split as in your case there is a common pattern of anything after _ is what needed for the operation within the function.
API : split : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

Code

$('#collapse_note,#collapse_notebook').on('hide.bs.collapse', function () {
  var id = $(this).prop('id').split('_')[1];

  $('#'+id+'-caret').removeClass( "fa-caret-up" );
  $('#'+id+'-caret').addClass( "fa-caret-down" );
})

This is not the same as the original ... the ```$('#note-caret')``` needs to change — Jeremy Lynch, Aug 02 '14 at 06:42

score 1 · Answer 2 · answered Aug 02 '14 at 07:27

1

This should work.

('#collapse_notebook,#collapse_note').on('hide.bs.collapse', function () {
  var curr_id = this.id.split('_')[1]
  $('#'+curr_id+'-caret').toggleClass('fa-caret-up fa-caret-down');
})

answered Aug 02 '14 at 07:27

Abhilash

1,610
9
19

score 0 · Answer 3 · answered Aug 02 '14 at 06:40

use comma separated multiple selectors:

$('#collapse_notebook,#collapse_note').on('hide.bs.collapse', function () {
 $("#"+this.id.replace('collapse_','')+"-caret").removeClass( "fa-caret-up" );
 $("#"+this.id.replace('collapse_','')+"-caret").addClass( "fa-caret-down" );
});

Apply same function to multiple ids

3 Answers3