jQuery + Firebug = reduced repetitive work

Have you ever had a page that needed styles applying to certain elements again and again (and again) in some sort of pattern. The finished page could have no js either. I just had a long page of tables that the 3rd column had to be formatted differently and it was a pain so I needed a way around the problem. Write a quick bit of jQuery to apply to to the page and preview it in the browser. Then using firebug (firefox plugin), cmd/right click the document root element and click “copy HTML”. Just paste that into a new file and you now have the static HTML which the jQuery applied the styles to. Just remember to delete the jQuery code from the new doc and you are done.This example adds the class “value” to all the third “td” elements in the document: $(document).ready(function() { var str = ":nth-child(3n)"; $("tr td" + str).addClass('value');         });Resources:http://api.jquery.com/nth-child-selector/http://stackoverflow.com/questions/2184862/saving-the-manipulated-dom-html-after-editing-it-with-firebug

Category: Web development