jQuery and CSS Selectors Part-2
Introduction
In this part, you are going to learn robust feature of jQuery
Selector. Look at this image, left side is its code and right side is its
output.
Above code is very simple, no any styles applied. Now,
we want to achieve the following style by using jQuery and some CSS.
How? You can see there are some challenges for
developer, for example:
(i) How will you access to each <li> element to
apply icon?
(ii) How will you apply background color for
<ul>?
Remember, any modification in above <body> is not
acceptable, that's challenge.
Okay, we have seen at 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 it '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 web-based icon in 'newStyle', if you
don't have internet connection, 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 jQuery library reference.
In 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 orientation of the list is also changed. Also, applied the
margins to the list to avoid the icon overlap.
Step
3
Now it's time to apply background, so let's add one
more line in 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:
(i) Is a descendant of the element with an ID of fruits
(ii) (#fruits)
(iii) 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:
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 on "Attribute selectors".
I hope you like it. Thanks.
Comments
Post a Comment