javascript - 更改多个span标签的内容

Question

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

首先，我有大约一千个包含数字或点的跨度标签。它用作库的标题，数字代表列的 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 将更改为空白列 ID。

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

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

此函数返回新的列 ID，如果列 ID 不在数组中，则返回 未定义，这意味着必须将其更改为空白列 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="";
    }
}

现在，正如您可能已经猜到的，我想更新所有的 span 标记 ID。

我使用以下函数:

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

我面临的问题是 newSpanId(array,id) 效果很好，它根据参数中给出的数组将范围 ID 更改为新的，但是当我使用 updateSpans(array)，我在“Unresponsive Script”的 firebug 中收到错误:

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.

如何让所有的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/