As promised in yesterday’s post, today I am going to show you how to add id’s to a bunch of elements. Everyone has created navigation menus using unordered lists. Very common thing right? Well, sometimes you have to actually style every list item or ‘a’ tag differently. I’m going to show you to use jQuery to add a different id to each list item in a typical navigation. So first, I’ll give you the simple html:
<ul id="navigation"> <li><a href="index.php">Home</li> <li><a href="about.php">About</li> <li><a href="portfolio.php">Portfolio</li> <li><a href="contact.php">Contact</li> <li><a href="/blog">Blog</li> </ul>
Pretty straight forward list. Here is the jQuery:
$(document).ready(function() { $('#navigation li').each(function(index) { $(this).attr({ 'id': 'nav-' + index }); }); });
That finds every li within the ul with an id of ‘navigation’, and for each of them give it an id of ‘nav-’ and whatever number it is in the index. So the first li in the list would have an id of ‘nav-0′. Since the index starts at 0. Now that you know how to do that, you can add any attribute you want to anything, be it a title, an href, its all up to you. Hop to it.
Coupon Code: webmachine
jQuery junkBox
$.merge(firstArray, secondArray);
This merges the contents of the second array into the first. So the below code would print out: 0, 1, 2, 3, 4
var firstArray = [0, 1, 2]; var secondArray = [3, 4]; var finalArray = $.merge(firstArray, secondArray); $.print(finalArray);
Soooo…I have decided to try my hand at updating my install of Sass to version 3. I’m just a simple cave man…but I do know one thing. THAT was a bitch. I am stupid when it comes to command-line stuff. I literally have to do a google search on everything that I try to do. I have 10 windows open at the moment and each one is something dumb. Like how to change directories, how to update a damn gem, how do I update compass, how do I recompile with compass….COME ON!
