Changing content of numerous span tags

Question

I hope to you'll be able to solve my problem, spent the last 3 hours trying to solve it.

First of all, I have about a thousand span tag containing numbers or a dot. It's working as a header for a library, numbers represents the id of a column, only even numbers are shown, odd numbers are remplaced by a dot in order to avoid numbers overlapping. Sadly I can use anything other than span tag as the library works this way.

<div class="marker" style="font-size: 10px;">
     <span>
       <span class="header" style="width: 15px; display: inline-block;">.</span>
       <span class="header" style="width: 15px; display: inline-block;">2</span>
       <span class="header" style="width: 15px; display: inline-block;">.</span>
       <span class="header" style="width: 15px; display: inline-block;">4</span>
       .                                                                    .
       .                                                                    .
       .                                                                    .
       <span class="header" style="width: 15px; display: inline-block;">936</span>
       <span class="header" style="width: 15px; display: inline-block;">.</span>
       <span class="header" style="width: 15px; display: inline-block;">938</span>
    </span>
</div>

My goal is to change the numbers (ie column id). For this purpose, I have an 2-dimensional array, containing the number I want to change (left) and the new number (right). For example :

var arrayCorres = [[448, 603], ... ,[345, 666] ]

In this example, the column id 448 will be changed in column id 603, same for 345 to 666. A column id that doesn't exist in arrayCorres will be changed to a blank column id.

So I made the following function to search in the array for the new value of a column id :

function changeId(array,value){
    for (ite = 0; ite < array.length; ite++){
        if (value == array[ite][0]){
            return(array[ite][1]);
        }
    }
}

This function returns the new column id, or undefined if the column id isn't in the array, meaning it has to be changed to a blank column id.

Now I use this function to update a single span tag by giving its id in the parameters :

function newSpanId(array,id){
    var tmp = changeId(array,id);
    if (tmp!=undefined){
       $(".marker").find('span')[id].innerText=tmp; 
    }
    else {
        $(".marker").find('span')[id].innerText="";
    }
}

Now, as you may have guessed, I'll like to update all of the spans tag id.

I use the following function :

function updateSpans(array){
    var max = ($(".marker").find('span').length );
    for (ite = 1; ite < max; ite++){
        newSpanId(array,ite);
    }
}

The problem I'm facing is that newSpanId(array,id) works well, it changes the span id to a new one according to the array given in parameters but when I use updateSpans(array) , I get an error in firebug of "Unresponsive Script" :

A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

How to make all the span tags to update ? Thanks for your time !

Answer 1

You can use $.each() to iterate array, filter() to match .header element where .textContent is equal to number at first index of current array, .text() to set new text content

 var arrayCorres = [ [448, 603], [345, 666] ]; $.each(arrayCorres, function(index, arr) { $(".header").filter(function(index, el) { return el.textContent == arr[0] }) .text(arr[1]) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <div class="marker" style="font-size: 10px;"> <span> <span class="header" style="width: 15px; display: inline-block;">.</span> <span class="header" style="width: 15px; display: inline-block;">448</span> <span class="header" style="width: 15px; display: inline-block;">.</span> <span class="header" style="width: 15px; display: inline-block;">345</span> <span class="header" style="width: 15px; display: inline-block;">936</span> <span class="header" style="width: 15px; display: inline-block;">.</span> <span class="header" style="width: 15px; display: inline-block;">938</span> </span> </div> 

jsfiddle https://jsfiddle.net/1cjxh5o2/