CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
Anup
Anup

Reputation: 3353

Array goes empty/undefined in IE

My functionality is based on data formatting with current structure and WS. My code is getting data and rearrange in a new structure by js/jquery. It is working fine in all browsers and mobile devices except IE. It is not working in any of IE versions. WS data is coming in "wrapper" and i again get and set it in two div's that are "lDiv" and "rDiv". Code is here for more clarification:

    var firArr = new Array();   

    function firstFn(){  
        firArr = $("#container").find(".wrapper");
        var len = firArr.length;
         $("#container").html("");

        $("#container").append('<div class="lDiv"></div><div class="rDiv"></div>');

         for(var x=0; x < len ; x++){
             var html="";                
             if(x % 2 != 0){    
                html = firArr[x];                    
                $(".rDiv").append(html);
             }
            else{           
                html = firArr[x];           
                $(".lDiv").append(html);
            }
        }       
    }
    firstFn();

Upvotes: 0

Views: 302

Answers (1)

blex
blex

Reputation: 25634

IE seems to not have a reference to your elements once you remove them from the DOM. Use a temporary container to solve this:

function firstFn(){  
    var temp = $('<div class="lDiv"></div><div class="rDiv"></div>');
    
    $("#container .wrapper").each(function(i,o){                                  
        temp.eq(i % 2).append(o);
    });

    $("#container").html(temp);  
}

firstFn();
.lDiv, .rDiv{ float: left; width: 30%; padding: 1em; margin: 5%; background: #edeced }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="container">
    <div class="wrapper">1</div>
    <div class="wrapper">2</div>
    <div class="wrapper">3</div>
    <div class="wrapper">4</div>
</div>

In the code above, temp is a jQuery Object that references 2 divs (.lDiv and .rDiv). The first one can be accessed by doing temp.eq(0), and the second, by temp.eq(1).

In the $.each function, i is the index of the current element, o is a reference to it.

Doing .eq(i % 2) will result in alternatively selecting the left and right divs so you can append stuff to it.

Upvotes: 2

Related Questions