jQuery with ASP.NET

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!

Related posts:

1. How To Use Basic jQuery Filters With HTML List