Post
Ask Question

JQuery and CSS Selectors: Part 2


Introduction

In this part, you are going to learn about a robust feature of jQuery Selectors. Look at this image; the left side is its code and the right side is its output.

image001.gif
 

The above code is very simple, no styles are applied. Now, we want to achieve the following style by using jQuery and some CSS.

image002.jpg
 

How? You can see there are some challenges for the developer, for example:

  1. How will you access each <li> element to apply an icon?

  2. How will you apply a background color for <ul>?

Remember, any modification in the above <body> is not acceptable, that's the challenge.

Okay, we have seen the challenges so far; let's try to solve this. Follow the steps:

Step 1

We need to create two CSS styles and we will call them 'newStyle' and 'newStyle1'. Find the CSS style code here:

    <style type="text/css">
        .newStyle
        {
            margin: 20px;
            float: left;
            list-style:square url("http://icons.iconarchive.com/icons/fi3ur/fruitsalad/16/apple-icon.png");
        }
        .newStyle1
        {
            background-color:Lime;
        }
    </style>

Note: I'm using a web-based icon in "newStyle"; if you don't have an internet connection, then please get it locally.

Step 2

Now, in this step we will create jQuery methods that will find <li> and also attach the above styles to it. Find the jQuery code here:

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#fruits > li').addClass('newStyle');
        });
    </script>

Note: Don't forget to use a jQuery library reference.

In the above code, we begin the jQuery code by calling $(document).ready(), which runs the function passed to it as soon as the DOM has loaded but not before. The second line uses the child combinator (>) to add the horizontal class to all top-level items only. In effect, the selector inside the $() function is saying, "Find each list item (li) that is a child (>) of the element with an ID of newStyle (#newStyle)."

Here, if you run the web page, you can see icons are attached and even the orientation of the list is also changed. They are also applied to the margins of the list to avoid the icon overlap.

Step 3

Now it's time to apply a background, so let's add one more line in the existing jQuery code.

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#fruits > li').addClass('newStyle');
            $('#fruits li:not(.newStyle)').addClass('newStyle1');
        });
    </script>

This time we are selecting every list item <li> that:

  1. Is a descendant of the element with an ID of fruits

  2. (#fruits)

  3. Does not have a class of horizontal :not(.horizontal)

 

When we add the sub-level class to these items, they receive the background defined in the newStyle1.

Now the nested list looks similar to the following screenshot:

image002.jpg

Now look at my complete code.

Complete Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Exploring jQuery</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#fruits > li').addClass('newStyle');
            $('#fruits li:not(.newStyle)').addClass('newStyle1');
        });
    </script>
    <style type="text/css">
        .newStyle
        {
            margin: 20px;
            float: left;
            list-style:square url("http://icons.iconarchive.com/icons/fi3ur/fruitsalad/16/apple-icon.png");
        }
        .newStyle1
        {
            background-color:Lime;
        }
    </style>
</head>
<body>
    <div>
        <h2>Fruits Category based on flower</h2>
        <ul id="fruits">
            <li>From Single Flower
                <ul>
                    <li>Mango</li>
                    <li>Apple</li>
                    <li>Orange</li>
                    <li>Strawberry</li>
                </ul>
            </li>
            <li>From Group of Flowers
                <ul>
                    <li>Follicle</li>
                    <li>Legume</li>
                    <li>Lomentum</li>
                    <li>Silique</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

In the next part we will learn about "Attribute selectors". I hope you like it. Thanks.


Similar Articles