Generating lists: javascipt function with a multiple conditions

Question

You don't have to be familiar with spry syntax but I'm using SPRY (AJAX widget) and trying to write a function to handle multiple conditions.

spry:when="{ds_CurrentRowNumber} == {ds_RowNumber} && {ds_RowNumber} < 4"

I'd like to turn this into a function that generates a new ul tag in the same div every 4 li tags like:

 <ul spry:repeatchildren="ds1">
   <li spry:if="{ds_RowID} < 4 ">{item}</li>
 </ul>

 <ul spry:repeatchildren="ds1">   
   <li spry:if="{ds_RowID} > 4 && {ds_RowID} < 9  ">{item}</li>
 </ul>

What would this function look like? Any is help is much appreciated.

Answer 1

This is normally done with the Modulus operator (the percentage sign - % - in Javascript).

Modulus returns the "remainder after division" which can tell you exactly when you've hit a new "row".

So (not knowing Spry at all) something like this: {ds_RowID} % 4 = 0 should tell you when you're at a new row - for example the modulus of row 4 returns 4 % 4 of zero (4 divided into 4 has a remainder of zero). The modulus of 5 % 4 would be "1" and so forth.

So, basically, when the modulus is zero you'd do your special processing (ending the previous list - if one exists) and starting a new one.

Some psuedo code:

itemsPerRow = 4 Start the first row (

) Loop over all items Display current item (
) if currentRow modulus itemsPerRow is zero OR if currentRow is the Last End the row (

) if currentRow < totalRows - itemsPerRow There's at least one more row to go, start the next row () end if end if End Loop

This might need to be changed a bit if your index starts with zero rather than one, but I hope you get the idea.