Similar to cycle tag in Handlebars?

Question

JavaScript

Hello! Please tell me how to organize the following behavior {{#each}}:

<div class="row">
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
   <div class="col-sm-4">...</div>
</div>
<div class="row">
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
   <div class="col-sm-4">...</div>
</div>
// ...

To make div.row iterate every three iterations. Django has a similar tag that returns values ​​one by one:
{% cycle 'row1' 'row2' %}
upd. added the ember.js tag, since handlebars is a standard templating engine

Answer 1

Your script is executed before jQuery is initialized. wrap it in$(function() { /* здесь код */ });

$(function() {
    var top = 0, bottom = 0, left = 0, right = 0;
    $("#up").click(function() {
        top += 2;
        $("#player").css("bottom", top);
     });
});

https://jsfiddle.net/3csd9k2w/

Answer 2

Everything moves, but on the first click, the value of bottom is set to zero.
Checked here:
https://jsfiddle.net/dn5x3auc/

Answer 3

Because your variable name is top and it is global. But there can't be a global variable with that name, the place is already taken . So when you do top += 2, you are not working with a number at all. Change the name of the variable, or run your code in a scope other than the global scope, or make your top a property of some object, or...

Answer 4

Write a helper that will cut off by @index of the collection