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将更改为空白列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="";
    }
}

现在，正如您可能已经猜到的那样，我想更新所有跨度标记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)时，我得到了一个＆＃34;无响应脚本＆＃34;的萤火虫错误：

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

如何更新所有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/

更改多个范围标记的内容

1 个答案: