There are two groups of blocks "children" and "parents". it is necessary that the .acrive class .acrive initially assigned to the parent, then to all of his children, then transferred to the next parent, etc. I tried 2 ways
1 way:
$(".field-name-field-iconresults").each(function(i, el) { setTimeout(function() { $(el).addClass("active"); }, 400 + (i * 400)); $('.field-name-field-iconresults .field-item').each(function(j, chel) { setTimeout(function() { $(chel).addClass("active"); }, 400 + (j * 800)); }) }); .field-name-field-iconresults .field-item { display: inline-block; position: relative; width: 50px; height: 50px; background: #8BC34A; } .field-name-field-iconresults .field-item.active { background: #FF9800; } .field-name-field-iconresults { border: 2px dotted #E91E63; } .field-name-field-iconresults.active { border: 2px dotted #8BC34A; background: #B2EBF2; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="view-content"> <div class="views-row views-row-1 views-row-odd views-row-first"> <div class="field field-name-title field-type-ds field-label-hidden"> <div class="field-items"> <div class="field-item" property="dc:title"> <h2>ะะตัะฒัะน ัะปะตะผะตะฝั</h2> </div> </div> </div> <div class="field field-name-field-iconresults field-type-image field-label-hidden"> <div class="field-items"> <div class="field-item"> </div> <div class="field-item"> </div> </div> </div> </div> <div class="views-row views-row-2 views-row-even"> <div class="field field-name-title field-type-ds field-label-hidden"> <div class="field-items"> <div class="field-item" property="dc:title"> <h2>ะัะพัะพะน ัะปะตะผะตะฝั</h2> </div> </div> </div> <div class="field field-name-field-iconresults field-type-image field-label-hidden"> <div class="field-items"> <div class="field-item"> </div> <div class="field-item"> </div> <div class="field-item"> </div> </div> </div> </div> <div class="views-row views-row-3 views-row-odd"> <div class="field field-name-title field-type-ds field-label-hidden"> <div class="field-items"> <div class="field-item" property="dc:title"> <h2>ะขัะตัะธะน ัะปะตะผะตะฝั</h2> </div> </div> </div> <div class="field field-name-field-iconresults field-type-image field-label-hidden"> <div class="field-items"> <div class="field-item"> </div> <div class="field-item"> </div> </div> </div> </div> <div class="views-row views-row-4 views-row-even views-row-last"> <div class="field field-name-title field-type-ds field-label-hidden"> <div class="field-items"> <div class="field-item" property="dc:title"> <h2>ะะพัะปะตะดะฝะธะน ัะปะตะผะตะฝั</h2> </div> </div> </div> <div class="field field-name-field-iconresults field-type-image field-label-hidden"> <div class="field-items"> <div class="field-item"> </div> <div class="field-item"> </div> </div> </div> </div> </div> 2 way:
$(".field-name-field-iconresults").each(function(i, el) { setTimeout(function() { $(el).addClass("active"); $(el).find('.field-item').each(function(j, chel) { setTimeout(function() { $(chel).addClass("active"); }, 400 + (j * 800)); }) }, 400 + (i * 400)); }); .field-name-field-iconresults .field-item { display: inline-block; position: relative; width: 50px; height: 50px; background: #8BC34A; } .field-name-field-iconresults .field-item.active { background: #FF9800; } .field-name-field-iconresults { border: 2px dotted #E91E63; } .field-name-field-iconresults.active { border: 2px dotted #8BC34A; background: #B2EBF2; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="view-content"> <div class="views-row views-row-1 views-row-odd views-row-first"> <div class="field field-name-title field-type-ds field-label-hidden"> <div class="field-items"> <div class="field-item" property="dc:title"> <h2>ะะตัะฒัะน ัะปะตะผะตะฝั</h2> </div> </div> </div> <div class="field field-name-field-iconresults field-type-image field-label-hidden"> <div class="field-items"> <div class="field-item"> </div> <div class="field-item"> </div> </div> </div> </div> <div class="views-row views-row-2 views-row-even"> <div class="field field-name-title field-type-ds field-label-hidden"> <div class="field-items"> <div class="field-item" property="dc:title"> <h2>ะัะพัะพะน ัะปะตะผะตะฝั</h2> </div> </div> </div> <div class="field field-name-field-iconresults field-type-image field-label-hidden"> <div class="field-items"> <div class="field-item"> </div> <div class="field-item"> </div> <div class="field-item"> </div> </div> </div> </div> <div class="views-row views-row-3 views-row-odd"> <div class="field field-name-title field-type-ds field-label-hidden"> <div class="field-items"> <div class="field-item" property="dc:title"> <h2>ะขัะตัะธะน ัะปะตะผะตะฝั</h2> </div> </div> </div> <div class="field field-name-field-iconresults field-type-image field-label-hidden"> <div class="field-items"> <div class="field-item"> </div> <div class="field-item"> </div> </div> </div> </div> <div class="views-row views-row-4 views-row-even views-row-last"> <div class="field field-name-title field-type-ds field-label-hidden"> <div class="field-items"> <div class="field-item" property="dc:title"> <h2>ะะพัะปะตะดะฝะธะน ัะปะตะผะตะฝั</h2> </div> </div> </div> <div class="field field-name-field-iconresults field-type-image field-label-hidden"> <div class="field-items"> <div class="field-item"> </div> <div class="field-item"> </div> </div> </div> </div> </div> Both methods are not suitable for the task, the regulation of the time interval, I think is not universal, since the number of "children" from "parents" is different. Perhaps there is a way to sort through an array, but itโs hard for me to make friends with them)
