While-Schleife Akt zweimal JS

Question

ich diesen Code verwendet:

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

jedoch sagte Freund mir, dass Msg: nicht (.was_added) ist zu langsam, so dass es in der entgegengesetzten Art und Weise tun:

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

aber der Code fügen Sie die Schaltfläche zweimal jedes Mal für die letzte.

nicht wirklich dieses Verhalten verstehen.

Answer 1

Das Problem mit einer Website, die nicht unter Ihrer Kontrolle ist, ist es nicht immer wissen, was läuft, und es dauerte eine lange Zeit zu erkennen, dass das Problem nicht Tasten erweitert zweimal (gegen Logik), aber wer nicht, ich bearbeite den Code zur gleichen Zeit.

erklären so nur einmal:

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

und die Schleife (alle 2 Sekunden):

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

irgendwelche Ideen für den Wandel sind willkommen.

Answer 2

Verwenden Sie previousElementSibling anstelle von previousSibling, so dass es über Textknoten überspringt.

Und fügen Sie dem Element die Klasse was_added hinzu, damit es später nicht erneut verarbeitet wird.

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>