jQuery - execute a block of code in one line

Question

Hi,

I have a block of code:

                $('#link_dwebsitedesign a').removeClass('selected');
            $('#link_dhuisstijl a').removeClass('selected');
            $('#link_dhosting a').removeClass('selected');
            $('#link_dwordpress a').removeClass('selected');
            $('#link_dseo a').removeClass('selected');
            $('#link_dcms a').removeClass('selected');
            $('#link_dslicen a').removeClass('selected');
            $('#link_dwebshop a').removeClass('selected');

And it needs to be executed serveral times in my script.

Isnt there a selector or anything so i can execute this block of code in one line?

Example: $('blockofcode').execute();

Thnx!

Answer 1

Put it in a function and then call the function instead.

Answer 2

You can wrap the code in a function:

     function mycode(){
        $('#link_dwebsitedesign a').removeClass('selected');
        $('#link_dhuisstijl a').removeClass('selected');
        $('#link_dhosting a').removeClass('selected');
        $('#link_dwordpress a').removeClass('selected');
        $('#link_dseo a').removeClass('selected');
        $('#link_dcms a').removeClass('selected');
        $('#link_dslicen a').removeClass('selected');
        $('#link_dwebshop a').removeClass('selected');
     }

And call your function wherever you want:

mycode();

See Javascript Functions tutorial for more info.

Answer 3

Create a small plugin that does this for you, since you seem to be doing it all the time:

(function($) {
  $.fn.removeSelected = function() {
    return $(this).each(function() {
         $('a', this).removeClass('selected');
     });   
  });
})(jQuery);

Then pass jQuery an array of selectors to remove the class...

var links_array = ['#link_dwebsitedesign', '#link_dhuisstijl', '#link_dhuisstijl', '#link_dwordpress', '#link_dseo', '#link_dcms', '#link_dslicen', '#link_dwebshop'];

function removeLinks(links) {
    $(links.join(', ')).removeSelected();
}
removeLinks(links_array);

And voila!

Answer 4

Might I suggest it could be shortened:

$('#link_dwebsitedesign a, #link_dhuisstijl a, #link_dhosting a, #link_dwordpress a, #link_dseo a,#link_dcms a, #link_dslicen a, #link_dwebshop a').toggleClass('selected');

Which does the same thing. You could put that in a function like so:

function jQuery_ToggleSelected()  
{  
    $('#link_dwebsitedesign a, #link_dhuisstijl a, #link_dhosting a, #link_dwordpress a, #link_dseo a,#link_dcms a, #link_dslicen a, #link_dwebshop a').toggleClass('selected');    
}  

And just called jQuery_ToggleSelected() to add/remove the desired style to those elements.

Answer 5

I would give all those #link_dwebsitedesign, #link_dhuisstijl, etc. elements a common class, for example class="link", then just use .class selector like this:

$(".link a").removeClass("selected");

You can do this anywhere you find yourself repeating code...if you want to handle elements in a batch, use a common class to identify them, then operate on that class.

Answer 6

$('#link_dwebsitedesign a , #link_dhuisstijl a, #link_dhosting a, #link_dwordpress a, #link_dseo a, #link_dcms a, #link_dslicen a, #link_dwebshop a').removeClass('selected');

Or put it in a Function

Answer 7

You can either use a class that is the same for all and call

$('.link a').removeClass('selected');

Or if you know what element you are calling you can remove all the ones with ids beginning with link (using div):

   $('div[id^=link_] a').removeClass('selected');

Or call everything from a function

function removeLinkSelects(){
    $('#link_dwebsitedesign a').removeClass('selected');
    $('#link_dhuisstijl a').removeClass('selected');
    $('#link_dhosting a').removeClass('selected');
    $('#link_dwordpress a').removeClass('selected');
    $('#link_dseo a').removeClass('selected');
    $('#link_dcms a').removeClass('selected');
    $('#link_dslicen a').removeClass('selected');
    $('#link_dwebshop a').removeClass('selected');
}
removeLinkSelects();

I'd probably be most likely to use those in that order, if I couldn't/didn't want to add a class use the attr selector and if that was wildly different use a function. Although in terms of the way the code looks like it could be structured I'd be more inclined to use but obviously I don't know why you've marked them up like that and most likely it's perfectly logical