Question

我使用了这段代码：

var list = was_talkWindows.querySelectorAll('.msg:not(.was_added)');
var i;
for (i = 0; i < list.length; i++)
{
    list[i].className += cssClass;

    var btn = document.createElement('button');
    btn.setAttribute('type', 'button');
    btn.setAttribute('class', 'was_addButton');
    btn.addEventListener('click', function() {
        was_button_act(this.parentElement);
    });
    btn.innerHTML = buttonName;
    list[i].appendChild(btn);
}

然而，朋友告诉我， .msg：not（.was_added）太慢了，所以以相反的方式这样做：

var cssClass   = ' was_added';
var buttonName = 'start waiting';

if (was_set_standby_auto == true)
{
    cssClass  += ' was_standby';
    buttonName = 'cancel';
}

try {
    var currectMSG = was_talkWindows.querySelector('.msg:last-child');

    while (currectMSG.classList.contains('was_added') == false)
    {
        currectMSG.className += cssClass;

        var btn = document.createElement('button');
        btn.setAttribute('type', 'button');
        btn.setAttribute('class', 'was_addButton');
        btn.addEventListener('click', function() {
            was_button_act(this.parentElement);
        });
        btn.innerHTML = buttonName;
        currectMSG.appendChild(btn);

        currectMSG = currectMSG.previousElementSibling;
    }
} catch (err) {}

但是代码每次都会为最后一个添加两次按钮。

不太了解这种行为。

Answer 1

使用previousElementSibling代替previousSibling，以便跳过文本节点。

并将was_added类添加到元素中，以便以后不会再次处理。

var was_talkWindows = document;
var cssClass = " newclass";
var buttonName = "Click me";

try {
  var currectMSG = was_talkWindows.querySelectorAll('.msg:last-child')[0];

  while (currectMSG.classList.contains('was_added') == false) {
    currectMSG.className += cssClass;
    currectMSG.classList.add('was_added');

    var btn = document.createElement('button');
    btn.setAttribute('type', 'button');
    btn.setAttribute('class', 'was_addButton');
    btn.addEventListener('click', function() {
      was_button_act(this.parentElement);
    });
    btn.innerHTML = buttonName;
    currectMSG.appendChild(btn);

    currectMSG = currectMSG.previousElementSibling;
  }
} catch (err) {}

<ol>
  <li class="msg was_added">Text</li>
  <li class="msg was_added">Text</li>
  <li class="msg">Text</li>
  <li class="msg">Text</li>
  <li class="msg">Text</li>
</ol>

Answer 2

一个不受你控制的网站的问题，它并不总是知道正在运行什么，我花了很长时间才意识到问题不是两次添加按钮（违背逻辑），但任何人都这样做不是我同时编辑代码。

所以只声明一次：

var was_msgList = was_talkWindows.getElementsByClassName('msg');

和循环（每2秒）：

for ( var i=was_msgList.length; i-- && was_msgList[i].getAttribute('data-status') == null; )
{
    was_load_addButton(was_msgList[i],attStatus,buttonText);
}

欢迎任何改变的想法。

虽然循环行为两次JS

2 个答案: