Every nth image with remainder offset for next loop

Question

I have two values that indicate how many results to parse from some data and which nth item I want to target. In this case, it's making every nth item a large image where as the rest are normal size. Here's what I need the loop to do:

• First image must be large, or have the option to turn on
• Get the remainder of normal size images at the end
• Use this remainder so that the next iteration over the data has the correct starting point before the next large image appears.

I got very close but my modulus is wrong or how i'm doing the checking.

var i = 0,
len = productsObj.products.length;

for (i; i < len; i++) {
    if ((i + this.nthProductImageOffset) % NTH_PRODUCT_IS_LARGE_TILE === 0) {
        productsObj.products[i].PhotoSize = 'large';
    } else {
        productsObj.products[i].PhotoSize = 'medium';
    }
}

// Store the remainder of medium tiles, if any, to be calculated
// against the next set of products to be appended.
this.nthProductImageOffset = i % NTH_PRODUCT_IS_LARGE_TILE;

So, if my two initial values were: NTH_PRODUCT_IS_LARGE_TILE = 7 productsObj.products.length = 30

First image is large, then every 7th image is large. If we are left with a remainder of 2 medium images at the end of the loop, that needs to be accounted for the next time we run the loop before another large image appears. This way, regardless of the nth number or the number of iterations, we will always have the correct number of medium tiles in between the large ones.

Answer 1

The problem with the code above appears to be your use of the offset. You need to update the offset to the modulus of i + your previous offset. Not just i.

For example:

this.nthProductImageOffset = (i + this.nthProductImageOffset) % NTH_PRODUCT_IS_LARGE_TILE;

Here's a visual jsFiddle example though: https://jsfiddle.net/kwandrews7/6jxsu91y/1/

Every time you click the run button 5 elements will be added to the list. The 7th element will always be LARGE while others will be MEDIUM. Best of luck.

html:

<button id="run">Run</button>
<ol id="list">
</ol>

javascript:

var btnAdd = document.getElementById('run');
btnAdd.addEventListener("click", addElement, false);

var offset = 0

function addElement() {

    var olList = document.getElementById('list');
    var newListItem = document.createElement('li');
    newListItem.innerText = 'New Item';

    var len = 5;
    var mod = 7;

    for (var i=0; i<len; i++) {
        var iOffset = i + offset;
        if ( iOffset % mod === 0) {
            var newListItem = document.createElement('li');
            newListItem.innerText = "LARGE: i(" + i + "), offset(" + offset + "), iOffset(" + iOffset + ")";
            olList.appendChild(newListItem);
        } else {
            var newListItem = document.createElement('li');
            newListItem.innerText = "MEDIUM: i(" + i + "), offset(" + offset + "), iOffset(" + iOffset + ")";
            olList.appendChild(newListItem);
        }
    }
    offset = (i+offset) % mod

}

Answer 2

Try this:

var j = 0;

function run(list) {
    for(var i = 0; i < list.length; i++) {
        if(j % 7 === 0) {
            console.log(list[i] + ' large');
        }
        else {
            console.log(list[i] + ' medium');
        }

        j += 1;
    }
}

run([1, 2, 3]);
run([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
run([16, 17, 18]);

You use j to track the whole number of items in all of your lists and check that against NTH_PRODUCT_IS_LARGE_TILE so that you don't have to care about list.length.

http://jsfiddle.net/nx3jswyk/

Output:

1 large
2 medium
3 medium
4 medium
5 medium
6 medium
7 medium
8 large
9 medium
10 medium
11 medium
12 medium
13 medium
14 medium
15 large
16 medium
17 medium
18 medium

Answer 3

Ok so I tried your Code and it works only if you initialize nthProductImageOffset. Just add

nthProductImageOffset = 0;

to the beginning of your Code and you should be good to go