Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Nested multifield loop

Avatar

Level 6

I have a nested multified and I need to loop through the inner multifield items also. For outer multifield I was using :

$(".coral3-Multifield-item").each(function( index ) {//body}

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Shaheena_Sheikh 

Target the parent/root multifiled using multifiled name like below.

$("[data-granite-coral-multifield-name='./multifield-name'] .coral3-Multifield-item").each(function( index ) {
        //Parent multifield items loop
	$(this).find(".coral3-Multifield-item").each(function( index ) {
            //Child multifiled items loop
	)};
)};

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

@Shaheena_Sheikh 

Target the parent/root multifiled using multifiled name like below.

$("[data-granite-coral-multifield-name='./multifield-name'] .coral3-Multifield-item").each(function( index ) {
        //Parent multifield items loop
	$(this).find(".coral3-Multifield-item").each(function( index ) {
            //Child multifiled items loop
	)};
)};
I am only using the code for outer loop and I have a console log within the loop. I have a parent multifield item, and it has 2 child items. The console log is printing 3 times (1 parent + 2 child item). Even though the outer loop is for parent and should only run once.

Avatar

Community Advisor

@Shaheena_Sheikh -  You need to target the specific class and use coral Ui in jquery. One example that you can consider is : https://aemsimplifiedbynikhil.wordpress.com/2018/07/29/multifield-and-dialog-data-in-jquery/