Suggested Videos
Part 14 - jQuery selected selector
Part 15 - jQuery disabled selector
Part 16 - jQuery each function
In this video we will discuss
1. What is method chaining
2. How method chaining works
3. When will method chaining not work
Let us understand this with an example. Consider the following HTML
The jQuery code should do the following
1. Change the color of all the list items to blue
2. All the list items should slide down (animation)
3. All the list items should slide up (animation)
4. Change the title attribute of all the list items to MY TITLE
One way to do this is by using the following jQuery code
Instead the jQuery methods can be chained as shown below
How does method chaining work
1. $('li') returns a jquery collection object that contains all the elements that match the selector
2. On the collection object css() method is called. This method applies the color to all the elements in the collection and returns the collection again.
3. On the collection that is returned by the css() method, the slideUp() method is called.
4. This process continues until we reach the last method in the chain.
When chaining methods like this, the line of code will become quite long and the readability will be lost. To improve the readability of the code you can format chained methods as shown below.
When will method chaining not work
Method chaining will not work if a method in the chain does not return an object. In the example below, text() method returns a string that contains the text of all the list items and not an object. Hence the chaining does not work in this case.
With the same example, method chaining works, if you use text() method to set the value for the list item. In this case, text() method sets a value for each list item in the jQuery collection object and returns that collection object. Hence the chaining works.
Part 14 - jQuery selected selector
Part 15 - jQuery disabled selector
Part 16 - jQuery each function
In this video we will discuss
1. What is method chaining
2. How method chaining works
3. When will method chaining not work
Let us understand this with an example. Consider the following HTML
<ul>
<li>US</li>
<li>India</li>
<li>UK</li>
<li>Canada</li>
<li>Australia</li>
</ul>
The jQuery code should do the following
1. Change the color of all the list items to blue
2. All the list items should slide down (animation)
3. All the list items should slide up (animation)
4. Change the title attribute of all the list items to MY TITLE
One way to do this is by using the following jQuery code
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li').css('color', 'blue');
$('li').slideUp(1000);
$('li').slideDown(1000);
$('li').attr('title', 'MY TITLE');
});
</script>
</head>
<body style="font-family:Arial">
<ul>
<li>US</li>
<li>India</li>
<li>UK</li>
<li>Canada</li>
<li>Australia</li>
</ul>
</body>
</html>
Instead the jQuery methods can be chained as shown below
<script type="text/javascript">
$(document).ready(function () {
$('li').css('color', 'blue').slideUp(1000).slideDown(1000).attr('title', 'MY TITLE');
});
</script>
How does method chaining work
1. $('li') returns a jquery collection object that contains all the elements that match the selector
2. On the collection object css() method is called. This method applies the color to all the elements in the collection and returns the collection again.
3. On the collection that is returned by the css() method, the slideUp() method is called.
4. This process continues until we reach the last method in the chain.
When chaining methods like this, the line of code will become quite long and the readability will be lost. To improve the readability of the code you can format chained methods as shown below.
<script type="text/javascript">
$(document).ready(function () {
$('li')
.css('color', 'blue')
.slideUp(1000)
.slideDown(1000)
.attr('title', 'MY TITLE');
});
</script>
When will method chaining not work
Method chaining will not work if a method in the chain does not return an object. In the example below, text() method returns a string that contains the text of all the list items and not an object. Hence the chaining does not work in this case.
<script type="text/javascript">
$(document).ready(function () {
$('li')
.text()
.css('color', 'blue')
.slideUp(1000)
.slideDown(1000)
.attr('title', 'MY TITLE');
});
</script>
With the same example, method chaining works, if you use text() method to set the value for the list item. In this case, text() method sets a value for each list item in the jQuery collection object and returns that collection object. Hence the chaining works.
<script type="text/javascript">
$(document).ready(function () {
$('li')
.text('MY VALUE')
.css('color', 'blue')
.slideUp(1000)
.slideDown(1000)
.attr('title', 'MY TITLE');
});
</script>
hi venkat ,
ReplyDeleteif we give time 10000 for slide down and check the result ,the title attribute is appearing during the slidedown event is occuring.
could you plz explain that
jQuery animations are async and won't stop other event/functions from firing otherwise UI will stop responding until animations finishes.
DeleteIn your case, the slideUp/slideDown method won't stop other chained functions from executing.
PS : If you want to set attr after your animation finishes, then use callback argument of the method and pass a function to perform the same.
Sir,
ReplyDeleteCan you please help in this situation....
$('li').css('color','red').slideUp(1000).slideDown(1000).attr('title','The Title of the List').css('color','blue');
I want first show the list as red and then show it as blue on slide down.
But it is not executing it as one by one!!!!
It shows the color as blue in the starting.
I try css("color","red") in your method,and the result is blue replaced by red,so I think every $('li') has only css()
Deletemethod
@Gauri Shankar Badola : still the same even after using the code in callback function.
ReplyDelete