Question

I am trying to run a simple post call which checks for updates and, if there are any, updates the specific element.
My problem is that inside the fadeOut function (which is implemented to allow for a smooth fadeOut and fadeIn), my variable i (used as a count) is incremented by one without doing it myself.
I tried renaming the variable to count instead, but the same behavior happened. I can’t see where this is happening, or why it is, and even console.log with the variable outside the fadeOut function doesn’t reveal anything.

Anyone have any ideas as to what is going on ?

My code is below.

Javascript:

$.post(BaseUrl + $(this).val(), function (data) {
    var i = 0;
    $(element).parent().children(".MenuLink").each(function(index, e) {
        if ($(this).text() != data[i]['Value']) {
            $(this).fadeOut(function() {
                $(this).html('<a href="' + data[i]['Key'] + '"class="psuedolink personlink">' + data[i]['Value'] + "</a>");
                $(this).fadeIn();
            });
        }
        i++;
    });
});

HTML:

<div id="ActorMenu" class="Menu LastMenuItem">
    <div id="ActorLabel" class="Label">Actor</div>
    <div id="ActorDropdown" class="Dropdown">
        <input id="ActorSearch" type="text" />
        <hr />
        <a class="MenuLink FirstDropdownItem" href="/Network/reveal_network_7777/Behavior/Summary/Actor/actor_id_0">actor_0</a>
        <a class="MenuLink" href="/Network/reveal_network_7777/Behavior/Summary/Actor/actor_id_1">actor_1</a>
        <a class="MenuLink" href="/Network/reveal_network_7777/Behavior/Summary/Actor/actor_id_2">actor_2</a>
        <a class="MenuLink" href="/Network/reveal_network_7777/Behavior/Summary/Actor/actor_id_3">actor_3</a>
        <a class="MenuLink" href="/Network/reveal_network_7777/Behavior/Summary/Actor/actor_id_4">actor_4</a>
    </div>
</div>

Answer 1

This is happening because when the each loop is executed the value of i has already incremented and when fadeOut callback is executed the value of i has already changed. Try this

$.post(BaseUrl + $(this).val(), function (data) {
    var i = 0;
    $(element).parent().children(".MenuLink").each(function(index, e) {
        if ($(this).text() != data[i]['Value']) {
            $(this).data("i", i).fadeOut(function() {
                var count = $(this).data("i");
                $(this).html('<a href="' + data[count]['Key'] + '"class="psuedolink personlink">' + data[count]['Value'] + "</a>").fadeIn();
            });
        }
        i++;
    });
});