Question

I’m a jQuery beginner, but I need to style the front-end of a CMS and altering the HTML is not an option, so jQuery to the rescue! I’ll be adding a class to a LI depending on the text inside the LI.

I could use a bit of help using the $(this) object of jQuery. For example the following code works:

if ($('div.nav ul li:nth-child(2):contains("About")').length > 0) {
    $('div.nav ul li:nth-child(2)').addClass("about");
}

But in order to not repeat my code exponentially, I would rather write something like this:

if ($('div.nav ul li:nth-child(2):contains("About")').length > 0) {
    $(this).addClass("about");
}

This however is not working. I’m sure that I’m butchering something terribly obvious, but I’ve read a few tutorials on the $(this) object and I’ve been staring at my code long enough to come and ask for a bit of help 🙂

Also, perhaps I’m missing a much easier solution. Let’s say I have the following markup.

<ul id="nav">
<li>About</li>
<li>Contact</li>
<li>News</li>
</ul>

Now let’s assume this navigation might change in the future so I can’t simply assign a class / icon to each LI using nothing but nth-child. Is there a way I can loop through each LI, and then loop through each condition? I’m not familiar enough with jQuery, but in my mix of English and jQuery it might look something like this:

loop through #nav:each li {
    if (child:contains("About")').length > 0) {
        $(this).addClass("about");
    }
    if (child:contains("Contact")').length > 0) {
        $(this).addClass("contact");
    }
    if (child:contains("News")').length > 0) {
        $(this).addClass("news");
    }
}

Unfortunately that is just made up syntax! Can anyone possibly help me write that in REAL jQuery 🙂 If so, I can possibly help you with any CSS issues you may be having.

Thanks!

Answer 1

You don’t need to loop over the li elements. Working with the sample markup you posted, here’s how you can add a class to the About li element.

$('#nav li:contains(About)').addClass('about')

Rinse and repeat two more times, for the other two items.

$('#nav li:contains(Contact)').addClass('contact')
$('#nav li:contains(News)').addClass('news')