How to implement JavaScript abstractly

Question

I'm looking to build a simple ranking system, where divs are generated dynamically, so there could be a couple or a few hundred, and each div can be ranked up or down. I have it working for 1, but I'm not sure how I can do it on a larger scale where each div has a unique id.

HTML

<button class="up">Up</button> 
<button class="down">Dowm</button> 

<div id="rank">Rank = 0</div>

JavaScript

var rank = 0;
var rankPercent = 0;
var rankTotal = 0;

$('.up').click(function(){
     rank++;
     rankTotal++;
     rankPercent = rank/rankTotal;
    $('#rank').text("Rank = "+ rankPercent);
});

$('.down').click(function(){
     rankTotal++;
     rankPercent = rank/rankTotal; 
    $('#rank').text("Rank = "+ rankPercent);
});

Answer 1

The easiest way to do this within JQuery is to have class="rank" on that rank div also. Then since you get sender in click button handler (you just need to change signature to $('.up').click(function(eventObject){ ... })) you can search for next element that has .rank class.

That all being said, I STRONGLY recommend you abandon this approach (since it's really error prone) and instead of building components yourself, invest time in learning something like AngularJs.

Take a look at this question if you want to look into AngularJS - How to master AngularJS?

EDIT: Thanks for the downvote... I was busy with making example in JsFiddle:

http://jsfiddle.net/7zrej/

Answer 2

Think of it a little differently. Create an upshift() and downshift() function, where the node swaps rank with whatever's above or below it (or do nothing if there's nothing below it).

So,

function upshift (node) {
  var nodeAbove = getNodeAbove(node);
  if (nodeAbove) swapRanks(node, nodeAbove);
  return node;
}

function downshift (node) {
  var nodeBelow = getNodeBelow(node);
  if (nodeBelow) swapRanks(node, nodeBelow);
  return node;
}

---

As a side thing, perhaps consider doing this with a more Object Oriented approach:

var ranks = [];

function Node (node_id) {
  var node = this;
  ranks.push(node);
  node.rank = ranks.length-1;
}

Node.prototype.upshift = function upshift () {};
Node.prototype.downshift = function upshift () {};

var n1 = new Node(),
    n2 = new Node(),
    n3 = new Node();

Answer 3

One of many ways would be to leverage data attributes to keep your rank data on your elements themselves. You can generate unique IDs for each div when you generate them, and put those in data attributes for your buttons too.

Your HTML with initial data attributes might look like this:

<button class="up" data-id="0">Up</button>
<button class="down" data-id="0">Down</button>
<div id="rank-0" data-rank="0">0</div>

<button class="up" data-id="1">Up</button>
<button class="down" data-id="1">Down</button>
<div id="rank-1" data-rank="0">0</div>

<button class="up" data-id="2">Up</button>
<button class="down" data-id="2">Down</button>
<div id="rank-2" data-rank="0">0</div>

And your JavaScript like this:

$(".up").click(function() {
    var id = $(this).data("id");
    var rank = $("#rank-" + id).data("rank");
    rank++;
    $("#rank-" + id).data("rank", rank).text(rank);
});

$(".down").click(function() {
    var id = $(this).data("id");
    var rank = $("#rank-" + id).data("rank");
    rank--;
    $("#rank-" + id).data("rank", rank).text(rank);
});

Live example

Answer 4

I'm writing up a longer answer but it would be helpful if you could describe in more detail exactly what sort of behavior you're trying to create.

Are you expecting that the div's reorder themselves when ranks change so that they are always in order of highest ranked to lowest ranked?

Question lacks detail.

EDIT: http://codepen.io/shawkdsn/pen/lojwb/

This example shows a dynamic list of elements with adjustable ranks that maintains the order from highest approval rating to lowest.

EDIT2: I should add that this codepen example is purely front-end code (incomplete solution) and any real ranking system would require integration with a back-end layer. Angular is a good option to explore and is relatively easy to pick up.