Refactoring and DRYing up jQuery code

Question

What I'm doing is adding a class to all elements who have the same class name as the id I'm hovering over. For example when I hover some list item with the id of vowel, then all the span elements with the class of the name vowel get acted upon (adding a class).

I can do that with no problems. But I want to do the same thing for many other id names with corresponding class names. Examples: consonants, semi-vowels, gutturals, palatals, etc.

I could do all these with different functions but I want to do is to call a function which will perform the same tasks but will be smart enough to find the name of the id and to generate the class name from that.

How do I extract the id name into a variable and assign it to the class name.

I've got the feeling that this same effect can be greatly simplified using just CSS or only adding a class to the element that encapsulates these children. Please post your HTML code and structure so I can elaborate. — duckyflip
– duckyflip, Commented Nov 27, 2009 at 16:11
Thanks for looking into it but cletus solved it. I don't think HTML/CSS alone could have done it. — allesklar
– allesklar, Commented Nov 27, 2009 at 17:06

Steerpike · Accepted Answer · 2009-11-27 15:54:33Z

2

You could use a plugin:

$.fn.highlight = function() {
    return this.each(function() {
        $(this).hover(function() {
            var id = $(this).attr('id');
            $('.'+id).addClass('myclass');
        });
    });
}

Which you could call like this:

$(document).ready(function() {
    $('span').highlight();
});

answered Nov 27, 2009 at 15:54

Steerpike

17.6k8 gold badges41 silver badges54 bronze badges

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

1 Comment

allesklar Over a year ago

Thank you Steerpike. I used some of your solution with some of cletus solution to make it work. Cheers.

cletus · Accepted Answer · 2009-11-27 23:46:53Z

1

You could do this:

$("[id]").hover(function() {
  $("." + this.id).addClass("highlight");
}, function() {
  $("." + this.id).removeClass("highlight");
});

but I wouldn't necessarily recommend it. I'd be more inclined to statically define it:

var ids = ["vowels", "consonants"];
for (var i = 0; i < ids.length; i++) {
  $("#" + ids[i]).hover(function() {
    $("." + this.id).addClass("highlight");
  }, function() {
    $("." + this.id).removeClass("highlight");
  });
}

or something like that.

edited Nov 27, 2009 at 23:46

answered Nov 27, 2009 at 15:52

cletus

627k169 gold badges922 silver badges945 bronze badges

3 Comments

allesklar Over a year ago

I almost works but the "." + ids[i] bit does not do anything. On line 3 of your code I have been testing this code and it works: $(this).css({'cursor' : 'default'}); but for some reason, on the same line the following does not work: $("#" + ids[i]).css({'cursor' : 'default'}); I hope this will give you a clue on how to help me further.

allesklar Over a year ago

line 3 of your second solution

allesklar Over a year ago

Thanks for your help cletus. I made it work by replacing ids[i] with $(this).attr('id') on line 4 and 6 of your second solution.

Collectives™ on Stack Overflow

Refactoring and DRYing up jQuery code

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related