Javascript检查<span>页面上的</span>所有<span>标签ID</span>

Question

我需要检查span的文本，并根据该文本将其替换为span类。 它使用asp Repeater并创建一个表。

<span class="label label-default" id="status">

<％＃Eval（“ ProjectStatus”）％>

和我不工作的JavaScript：

var status = document.getElementById('status').innerHTML;

          for (var i = 0; i < status.length; i++) {
              if (status === "Completed") {
                  status[i].innerHTML = "<span class='label label-success'> + status + </span>";
              }
          }

因此，编译后的代码如下所示：

<span class="label label-default" id="status">Completed</span>
<span class="label label-default" id="status">Hopper</span>

因此，我的目标是检查哪些文本具有该范围，并根据该文本替换其类。 如果其Completed set class ='label label-success'，依此类推。 谢谢。

Answer 1

似乎您只想将范围的类别从label-default更改为label-success。 我不建议您删除所有跨度并重新添加新的跨度以实现此目的。 您只需更改他们的班级即可。

 // get all spans with class='label-default' var spans = document.querySelectorAll("span.label-default"); for (var i = 0; i < spans.length; i++) { // if span contains the text Completed, replace label-default with label-success in the span's class list if (spans[i].innerHTML == "Completed") { spans[i].className = spans[i].className.replace(/\\blabel-default\\b/, "label-success"); } } 

 .label-default { background-color: grey; } .label-success { background-color: green; } 

 <span class='label-default'>Completed</span> <span class='label-default'>Failed</span> <span class='label-default'>Completed</span> <span class='label-default'>Completed</span> <span class='label-default'>Starting</span> <span class='label-default'>Failed</span> <span class='label-default'>Completed</span> 

Answer 2

不熟悉asp.net，但我认为您想要更多类似这样的东西：

var statusElem = document.getElementById('status');
var statusText = statusElem.innerHTML;

if (statusText === "Completed") {
    statusElem.className = 'label label-success';
}

这将更改SINGLE状态元素的类名。 如果要创建具有多个跨度的表，则需要执行以下操作：

var statusElems = document.getElementsByClassName("label");
for (var i=0;i<statusElems.length;i++) {
    var statusElem = statusElems[i];
    var statusText = statusElem.innerHTML;

    if (statusText === "Completed") {
        statusElem.className = 'label label-success';
    }
}

Answer 3

ID必须是唯一的。 尝试按类名称选择元素，并遍历所有找到的元素，检查innerHTML是否等于Completed 。

该代码将是这样的：

var status = document.getElementsByClassName("label-default");
for (var i = 0; i < status.length; i++) {
  if (status[i].innerHTML === "Completed") {
        alert('Completed');
      status[i].innerHTML = "<span class='label label-success'> + status + </span>";
  }
}

这是一个工作的小提琴。