While循環兩次執行JS

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);
}

任何改變的想法都歡迎。