1

It seems to work ok but I don't know if this can be impoved on or not.

I want to select any HTML tag that has a class of edit-text-NUM or edit-html-NUM and change the color of it. Here is what I am using...

jQuery(document).ready(function(){
    jQuery('*')
    .filter(function() {
        return this.className.match(/edit-(text|html)-\d/);
    })
    .css({
        'color': '#ff0000'
    });
});

Does that look ok and is the regex ok?

*edit: Also is this efficient? I am aware that using jQuery('*') might be a bit of a hog if it's a large page. It only has to work from <body> down so maybe it could be changed?

6
  • Is there a reason these elements can't have multiple classes? This would be a much better/simpler solution :) Jun 3, 2010 at 10:06
  • Yes Nick they can have multiple classes, e.g. <div class="menu edit-html-4">
    – fire
    Jun 3, 2010 at 10:08
  • @fire - Can one of those have a class that pertains to this? E.g. class="menu edit-html-4 colorme"? Also as a tip use @ replies like twitter, if you do @Nick I'll get a message on my screen letting me know someone replied so I can help further :) Jun 3, 2010 at 10:24
  • @Nick thanks for the tip ;-) I can't add any extra classes that are required (Kobi's answer wouldn't work for the same reason). What is the issue with the code I originally have?
    – fire
    Jun 3, 2010 at 10:39
  • your code is ok, insofar you have no options to add an extra class! so you can't pretend to be faster then...! at least you can restrict the find to the tags that have the two class you want! Jun 3, 2010 at 11:08

2 Answers 2

0
jQuery(document).ready(function(){ 
jQuery('body *') 
.filter(function() { 
    return this.className.match(/edit-(text|html)-\d/); 
}) 
.css({ 
    'color': '#ff0000' 
}); 

});

should limit it to the document body

1
  • I suppose this answers the 2nd question
    – fire
    Jun 3, 2010 at 14:26
0

You can use:

$("[class^='edit-text-'], [class^='edit-html-']")

Note that this isn't exactly the same. For one, it will not work if you have multiple classes.

If you are cautious about performance, a much better solution is to add another class to all elements:

<em class="edit-text-44 edit-text">

Then, you can simply use:

$(".edit-text, .edit-html")
7
  • Looking again, this only works if this is the only class, class can have multiple values, so my answer isn't exactly the same. *= may be more fitting, but has other problems.
    – Kobi
    Jun 3, 2010 at 10:03
  • Yes I just noticed that it doesn't work for multiple class, shall I stick with the filter way then?
    – fire
    Jun 3, 2010 at 10:04
  • Well, no. If you're worried about performance, it is best to add a single class to these elements, and lose the number (or use both: class="edit-html edit-html-4"
    – Kobi
    Jun 3, 2010 at 10:06
  • Sorry Kobi it must support multiple class
    – fire
    Jun 3, 2010 at 10:08
  • 1
    @Elangovan: That's a pretty big assumption :) Browsers have optimized finding by class quite a bit since it's such a common action now, don't assume what will perform better, the next *******monkey engine always changes the game. Jun 3, 2010 at 10:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.