更改众多跨度标签的内容

Question

希望您能够解决我的问题，并花了最后3个小时尝试解决它。

首先，我有大约一千个span标记，其中包含数字或点。 它用作库的头，数字表示列的ID，仅显示偶数，奇数用点替换，以避免数字重叠。 可悲的是，我可以使用span标签以外的任何东西，因为该库以这种方式工作。

<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>

我的目标是更改数字（即列ID）。 为此，我有一个二维数组，其中包含要更改的数字（左）和新的数字（右）。 例如 ：

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

在此示例中，列ID 448将在列ID 603中更改，与345更改为666相同arrayCorres中不存在的列ID arrayCorres改为空白列ID。

因此，我做了以下函数来在数组中搜索列id的新值：

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

此函数返回新的列ID，如果列ID不在数组中，则返回undefined ，这意味着必须将其更改为空白列ID。

现在，我通过在参数中提供其ID来使用此函数来更新单个span标签：

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

现在，您可能已经猜到了，我想更新所有的spans标签ID。

我使用以下功能：

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

我面临的问题是newSpanId(array,id)运作良好，它根据参数中给出的数组将span ID更改为一个新的ID，但是当我使用updateSpans(array) ，在Firebug中出现了错误“无响应脚本”：

此页面上的脚本可能很忙，或者可能已停止响应。 您可以立即停止脚本，在调试器中打开脚本，或者继续执行脚本。

如何使所有span标签更新？ 谢谢你的时间 ！

Answer 1

您可以使用$.each()来迭代数组，使用filter()来匹配.header元素，其中.textContent等于当前数组的第一个索引处的数字， .text()来设置新的文本内容

 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/