Chaining jQuery Object Operations

$("div#content").children("p:first").css("font-weight",   "bold").children("span"). css("color","red");

One of the great things about jQuery objects is that you can chain multiple jQuery operations together into a single statement. Each consecutive statement operates on the results of the previous operation in the chain. This can simplify your selectors as well as reduce the amount of class and ID definitions required in your CSS.

To help illustrate this, consider the following statements. The code first finds the <div> element with id="content" and then finds the first <p> element inside and changes the font-weight to bold. Then it finds the <span> elements inside the <p>

Get jQuery and JavaScript Phrasebook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.