CODEWITHSUNDEEP
javascriptjqueryfor-loop
Ghandhikus
Ghandhikus

Reputation: 841

JS and Jquery problem

hi i got the problem the script.js gives me

<div id="gracze">
  <div id="10" class="char" style="z-index: 19; top: 592px; left: 608px; "></div>
  <div id="14" class="char" style="z-index: 25; top: 784px; left: 608px; "></div>
</div>

instead

<div id="gracze">
  <div id="4" class="char" ... ></div>
  <div id="10" class="char" style="z-index: 19; top: 592px; left: 608px; "></div>
  <div id="14" class="char" style="z-index: 25; top: 784px; left: 608px; "></div>
</div>

get_players.php

4/62/6
10/19/19
14/19/25

script.js

function get_players()
{
    $.ajax({   
    type:   "POST",
    url:    "get_players.php",   
    dataType: "html",  
    success:  function(data) {
        var str = data;
                var chars = str.split("<br />");
                var lol = chars.length;
                for(var i = lol; i--; ) {
                    chars[i] = chars[i].split('/');
                    var o = document.getElementById(chars[i][0]);
                    var aimt = i;
                    if (!o) {
                        if (aimt!=chars.length-1 && aimt != 0) {
                            $('#gracze').html('<div id="'+chars[aimt][0]+'" class="char"></div>'+$('#gracze').html());
                            $('#'+chars[aimt][0]).css("top", chars[aimt][2]*32-16+"px");
                            $('#'+chars[aimt][0]).css("left", chars[aimt][1]*32+"px");
                            $('#'+chars[aimt][0]).css("z-index", chars[aimt][1]*32);
                        }
                    } else {
                        $('#'+chars[aimt][0]).animate({
                            "top": chars[aimt][2]*32-16+"px", "left": chars[aimt][1]*32+"px"
                        }, { duration: 275});
                        //$('#'+chars[aimt][0]).css("top", chars[aimt][1]*32-16+"px");
                        //$('#'+chars[aimt][0]).css("left", chars[aimt][2]*32+"px");
                        $('#'+chars[aimt][0]).css("z-index", chars[aimt][2]);
                    }
                }
        }});
    setTimeout("get_players();", 1000);
}

I think it's because of for(var i = lol; i--; ) {

Upvotes: 0

Views: 71

Answers (2)

Oded
Oded

Reputation: 498942

Change the loop to this:

for(var i = lol - 1; i >= 0 ;i-- )

Javascript array indexes start with 0 and end with the size of the array -1 (so if an array has 5 elements, the first one will have index of 0 and the last one of 4).

Your original loop starts with the size of the array, immediately decrementing it (so the last element is accessed). The loop continues until the variable decrements to 0, at which point the loop is existed, without the first element being used.

See this page about looping over arrays in javascript.

Additionally, this condition if (aimt!=chars.length-1 && aimt != 0) specifically excludes the last element. Remove the && aimt != 0.

Upvotes: 1

user113716
user113716

Reputation: 322462

Since you're doing a reverse loop, I'd use a reverse while instead.

var i = chars.length;
while( i-- ) {
    //...and so on
}

This will be faster, will give you the proper value of i inside the body of the loop, and will still terminate the loop at the proper time.

The reason this works is that I've used a post-decrementing operator for the while. This means that the value of i here:

while( i-- )

will always be 1 greater than it is in here:

{
    // ...and so on
}

So if the total length is 5, you'll have the proper index 4 inside the block.

Toward the end, when i is 1 in the evaluation, it will be 0 in the block, indicating the last iteration, which gets the item at the first index.

The next pass will evaluate i at 0, and the code in the block won't execute.

Upvotes: 0

Related Questions