Liferay + Alloy UI + Iterate Element via CSS Class

How to apply "selectedClass" on "li" element based on the dynamic value (Page Load).

<!-- HTML structure -->

<ul class="ul_container">
<li class="selectLiDynamically" id="sort_1" textContent="first">
<a href="#">Hello One</a> 
</li>
<li class="selectLiDynamically" id="sort_2" textContent="second">
<a href="#">Hello Two</a>
</li>
<li class="selectLiDynamically" id="sort_3" textContent="third">
<a href="#">Hello Three</a>
</li>
</ul>

//AUI script

AUI().ready('node', function (A) {
A.all('.selectLiDynamically').each(function(obj) {
if(obj.attr("textContent") == '<%=selectValue%>') {
if(A.one("#"+obj.attr("id"))) {
A.one("#"+obj.attr("id")).addClass(selectedClass);
}
} else {
if(A.one("#"+obj.attr("id"))) {
A.one("#"+obj.attr("id")).removeClass(selectedClass);
}
}
});
});

Here '<%=selectValue%>' is the value which comes dynamically from the request and based on that value, we iterate all the "li" element via class value i.e. "selectLiDynamically".

If dynamic value matches with the "id" of the "li" element, we add the "selectedClass" on that object else we remove "selectedClass" from the "li" element.

We are done with applying css class dynamically via AUI, on page load.

Cheers!
Henal Saraiya
(Senior Consultant)
CIGNEX Datamatics