In my previous post I have given you a few examples of the most basic jQuery filters. In this post I will dig a bit deeper to show you what else is possible.

Just to recap quickly, so far I have mentioned about following selectors:

• :first – selects first element
• :last – selects last element
• : odd – selects all odd elements
• :even – selects all even elements

And now a few new ones, but before I will jump to that, here is an HTML code which I use to play with:

<h2>
    Here is my magic list
</h2>
<p>
    <ul>
        <li>first point</li>
        <li>second point with an image: <img src="Images/icon_smile.gif" /></li>
        <li>third point</li>
        <li>fourth point</li>
        <li>fifth point</li>
        <li>sixth point</li>
    </ul>
</p>

Task 1: Our first taks is to add custom colour to the third and fifth element only, here is jQuery code which you can use:

$(document).ready(function () {
    $("ul.magicList > li:eq(2), ul.magicList > li:eq(4)").css("color", "red");
});

And here is the result:

A few words of explanation:

• li:eq(2) – our job was to select third element so you may ask why there is ’2′ passed as a paramater? That’s because index is zero-based. So first element has index 0, for second element index is 1 etc.
• “ul.magicList > li:eq(2), ul.magicList > li:eq(4)” – comma in the middle means logical OR. So it can be translated into: find third element OR fifth element.

Task 2: Now our objective is to select all elements starting from the second one. In other words … all except of the first one. There are two options which will give exactly the same effect:

$(document).ready(function () {
    $("ul.magicList > li:gt(0)").css("color", "red");
});

and second option:

$(document).ready(function () {
    $("ul.magicList > li:not(:first)").css("color", "red");
});

And here are the results:

Explanation:

• selector :not() allows you to invert selection, so you can select all elements that do not match the given selector, in our case :first
• selector :gt() requires parameter, zero-based index. GT stands for “greather than”. In out case we want all elements where index is greather than 0. Hint: there is also another similar selector – lower than :lt() which works in analogical way.

Task 3: this one is more interesting … add custom colour for all elements which contain an image. Even though it may sound like a much more complicated job, in fact you can do it really easily:

$(document).ready(function () {
    // set custom style for all elements containing image
    $("ul.magicList > li:has(img)").css("color", "blue");
});

Explanation:

• selector li:has(img) will return all LI elements conatining IMG tag. Of course you can use this selector to find any tag.

Task 4: the hardest task … add custom colour for every third element. So 3rd, 6th, 9th … elements should get a custom colour. jQuery doesn’t have a predefined selector for it, so in this case we have to implement it on our own. Luckily, it not a rocket science:

$(document).ready(function () {
    // set color only for every third element
    $("ul.magicList > li")
        .filter(function (index) { return index % 3 == 2; })
        .css("color", "red");});

Final result:

Explanation:

• after selecting all LI elements (“ul.magicList > li”) you can filter results with your own function which has to be passed as a parameter: filter(function (index) { return index % 3 == 2; })
• your custom function is expected to return true for all elements that you want to include and false for element which you want to reject
• parameter for your functions ‘index‘ is zero-based which means that for third element index is 2. 2 modulo 3 is 2. For sixth element index is 5, 5 modulo 3 is 2. You see how it works now?

I hope it all make sense to you. If not, leave a comment I will try to help!

In this post I would like to show you how you can make use of jQuery selectors and filters to manipulate HTML list. Here is the starting HTML to play with:

<h2>
    Here is my magic list
</h2>
<p>
    <ul class="magicList">
        <li>first point</li>
        <li>second point</li>
        <li>third point</li>
        <li>fourth point</li>
        <li>fifth point</li>
        <li>sixth point</li>
    </ul>
</p>

Please note that on ul tag has a CSS class magicList defined. It’s useful to have a unique CSS class or ID defined because it makes writing selectors much easier. Now, having magicList CSS class defiend, you can use following jQuery selector to get list of all elements:

$(document).ready(function () {
    $("ul.magicList > li").css("color", "green");
});

A bit of explanation:

• selector $(“ul.magicList”) will return all ul tags where CSS class equals ’magicList’
• selector  $(“ul.magicList > li”) will return all li tags within ul tag where CSS class is ‘magicList’
• css(“color”,”green”) – functions css() setts attribute color to provided value, in this case ‘green’

As a a result our HTML will look like this:

Now, let’s try to make it a bit more sophisticated – odd elements can stay green, but even elements should be red Here is a jQuery code which can do that for you:

$(document).ready(function () {
    $("ul.magicList > li:odd").css("color", "green");
    $("ul.magicList > li:even").css("color", "red");
});

In the above case I have used jQuery filters to limit set of elements to the one which I need:

• selector $(“ul.magicLIst > li”) will return all li tags and by using filter “:odd” it’s possible to take only odd elements and remove the even ones.
• for even elements filter to use is “:even”

Okey, let’s add another requirement – first and last elemets should be blue. As you can probably guess already there are additional jQuery filters which will return for you first and last element:

$(document).ready(function () {
    $("ul.magicList > li:odd").css("color", "green");
    $("ul.magicList > li:even").css("color", "red");
    $("ul.magicList > li:last").css("color", "blue");
    $("ul.magicList > li:first").css("color", "blue");
});

And here is the final result:

In this post I wanted to give you an idea how powerful and useful jQuery is and how easy you can manipulate HTML list with it. Of course ,the same results you can achieved in many different ways within ASP.NET  but none of them is not as simple as jQuery one.

In the next posts you will find more advanced filters which means more fun and more options to get exactly what you need!