Question

I’ve been racking my head over this for a while now and can’t find a solution.

First of I want to be able to do this in Jquery…

What I trying to do is compare the first li of each of the ul’s with the first ul to find any differences and apply a style to each li which has different text/string. Then do the same to the rest of the li in order, second li, third li of each ul.

my markup without classes ( i dont want to use classes to select using jquery )

<ul>
    <li>red</li>
    <li>blue</li>
    <li>green</li>
    <li>yellow</li>
    <li>black</li>
</ul>

<ul>
    <li>red</li>
    <li>blue</li>
    <li>red</li>       <----this one
    <li>yellow</li>
    <li>black</li>
</ul>

<ul>
    <li>green</li>     <----this one
    <li>blue</li>
    <li>green</li>
    <li>yellow</li>
    <li>black</li>
</ul>

in ul number two, i want the third li to have a class added to it becuase it has a different string compared to ul number 1.

Is this possible without adding a class to each li?

Answer 1

Here’s an alternative solution as well. I just grab the first ul and treat it as the master, although you could identify the master by class or id if you like. I then compare all the others to the master and add a class to the ones that don’t match so you could style those however you like.

http://jsfiddle.net/ZpFrr/