I love a lot of things in life: family, friends, booze, Cleveland Brown, etc. And jQuery is no different. There are things I love about it that are so simple but which make it incredibly useful. One of those is being able to select the nth child using CSS selectors and do something to it. For instance, the following code will find the 4th li in a list with the class name ‘product_thumbnails’ and apply zero right padding:
1 2 3 | $(document).ready(function(){ $("#somediv ul.product_thumbnails li:nth-child(4n)").css("padding-right", "0"); }); |
This is handy if you have a dynamically generated list (say, coming from a database) and you need to have no padding on a particular list item so that your page layout doesn’t break. Beautiful.
(Note: Be careful how you use it though as it can cause performance issues.)
