2022.2


Note: Thewaythefunctionsadd()andcss()areusedinthisscriptiscalled'chaining'.Chaining
isoptional;thesamecouldbeachievedbystoringtheresultsofthequeriesinavariable:
var myResult = query("#test1");
myResult.add(query("#test2");
myResult.css("background", "yellow");

Thefollowingscriptloadssnippetsinaniterationandaddstheirelementstoanemptyresultset(using
query()).Thenitreplacesaplaceholderinthetemplatewiththenewresult.
var chapters = query();
for ( var i = 1; i <= 4; i++) {
chapters = chapters.add(loadhtml('snippets/Chapter' + i + '.html'));
}
results.replaceWith(chapters);
Selector Matched element Matched element after script execution
#chapters <pid="chapters">{{chapters}}</p> <h1>Chapter1</h1>
<p>Loremipsum...</p>
<h1>Chapter2</h1>
<p>Loremipsum...</p>
<h1>Chapter3</h1>
<p>Loremipsum...</p>
<h1>Chapter4</h1>
<p>Loremipsum...</p>
addClass()
Addsthespecifiedclass(es)tooneoremoreHTMLelements,whichcanbe:
l
Theelementsthatmatchtheselectorofascript(see"results"onpage844).
l
Oneelementthatmatchestheselectorofascriptthatrunsfor"Eachmatchedelement"(see
"this"onpage781and"Settingthescopeofascript"onpage373).
l
Theelementsreturnedbyaqueryinthetemplate(see"query()"onpage742).
Addingaclasshasnoeffectiftheclassisalreadypresent.
addClass(classname)
Addsthespecifiedclass(es)tooneormoreHTMLelements.Thishasnoeffectiftheclassisalready
present.
classname
Page 784