Make Your Code Run Faster with jQuery Chaining

Using multiple jQuery statements in our codes means constantly reaccessing the same elements and reusing the same selectors most of the time. Doing that slows down the execution of your code.

To avoid that, we may use jQuery chaining. As the name itself suggests, its main function is chaining methods together into one statement.

By using a chained jQuery statement, you will save server time, as the script will load much faster. Moreover, you will also be saving your own time, as it is always easier and quicker to read neat and compact code. Chaining in jQuery is easy and practical - let's see how it's done with some simple examples.

jQuery Chaining: Main Tips

• We normally write statements which run one after another as separate operations.
• jQuery method chaining allows operations to be executed more quickly by connecting multiple methods in a single statement.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

EXCLUSIVE: 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

15% OFF

Pros

• Easy to navigate
• No technical issues
• Seems to care about its users

Main Features

• Huge variety of courses
• 30-day refund policy
• Free certificates of completion

AS LOW AS 14.99$

Definition and Examples

jQuery chaining allows you to execute multiple methods in a single statement. By doing that, it removes the need for repeatedly finding the same element to execute code. It also makes the code more compact and readable.

To perform jQuery method chaining, you should append actions to one another.

See an example of a chained jQuery statement below. Keep in mind that even at this point, more method calls could be added:

$("#par").css("color", "blue").slideUp(2500).slideDown(2500);

Due to long, chained jQuery statements, the lines of code can become hard to read. Luckily, the syntax is not very strict. Breaking lines will not break the chain jQuery statement:

$("#p1").css("color", "blue")
 .slideUp(2500)
 .slideDown(2500);

jQuery Chaining: Summary

• Traditionally, each statement is run as a separate operation. Chaining in jQuery is used to link multiple statements together.
• A chained jQuery statement is executed as one operation. Therefore, it runs faster.