爲什麼我的GreaseMonkey函數意外地被多次調用？

Question

我錯過了一些東西，我不知道爲什麼函數'addIcon（）'被多次調用。

考慮：

<div class="ticketpostcontainer">Some text</div> 
<div class="ticketpostcontainer">Some text</div> 
<div class="ticketpostcontainer">Some text</div> 

使用效用函數waitForKeyElements，其結果是每個div元素收到我的 「摺疊圖標」 三次：

// ==UserScript== 
// @name  Collapse Kayako Response 
// @grant    Sandbox 
// @namespace http://my.chiromatrixbase.com/fisher.chiromatrix.com/collaps_div.js 
// @include  http://imatrixsupport.com/* 
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 
// ==/UserScript== 
/*jslint plusplus: true, undef: true, sloppy: true, vars: true, white: true, indent: 2, maxerr: 30 */ 

//Enable or disable GreaseMonkey function, GM_log 
var GM_Debug = 1; 

if (!GM_Debug) { 
    var GM_log = function() {}; 
} 
//If FireBig is active, send GM log events to FB. 
if (unsafeWindow.console && GM_Debug) { 
    var GM_log = unsafeWindow.console.log; 
} 

GM_log("Running collapse kayako response script"); 

//Don't run on frames or iframes. 
if (window.top !== window.self) { 
     return; 
} 

waitForKeyElements(".ticketpostcontainer", addIcon); 

function addIcon() { 
    var i, toCollapse = document.getElementsByClassName('ticketpostcontainer'), j = toCollapse.length; 

    GM_log("Number of elements to collapse: " + toCollapse.length); 

    for (i = 0; i < j; i++) { 
    var curElement = toCollapse[i]; 

    var p = document.createElement('p'); 
    var a = document.createElement('a'); 
    var span = document.createElement('span'); 

    styleLink(a); 
    styleParagraph(p); 
    styleSpan(span); 
    p.appendChild(a); 
    p.appendChild(span); 
    a.appendChild(document.createTextNode('-')); 
    span.appendChild(document.createTextNode(' Some text')); 

    a.addEventListener("click", toggle, false); 

    curElement.parentNode.insertBefore(p, curElement); 
    } 

    function toggle(e) { 
    if (this.firstChild.nodeValue === '-') { 
     this.parentNode.nextSibling.style.display = 'none'; 
     this.firstChild.nodeValue = '+'; 
     this.nextSibling.style.display = 'inline'; 

    } else { 
     this.parentNode.nextSibling.style.display = 'block'; 
     this.firstChild.nodeValue = '-'; 
     this.nextSibling.style.display = 'none'; 
    } 
    e.preventDefault(); 
    } 

    function styleLink(a) { 
    a.href = '#'; 
    a.style.fontWeight = 'bold'; 
    a.style.background = '#F6F1E7'; 
    a.style.border = '1px solid #cccccc'; 
    a.style.color = '#B24C58'; 
    a.style.textDecoration = 'none'; 
    a.style.width = '15px'; 
    a.style.height = '15px'; 
    a.style.textAlign = 'center'; 
    a.style.fontSize = '100%'; 
    a.style.margin = '0 5px 5px 8px'; 
    a.style.cssFloat = 'left'; 
    a.style.display = 'block'; 
    a.style.lineHeight = '13px'; 
    } 

    function styleParagraph(p) { 
    p.style.margin = '0 0 0 0'; 
    p.style.lineHeight = '16px'; 
    p.style.clear = 'both'; 
    p.style.height = '15px'; 
    } 

    function styleSpan(span) { 
    span.style.display = 'none'; 
    } 
} 

Answer 1

addIcon摺疊所有ticketpostcontainer元素，但waitForKeyElements將爲所有三個ticketpostcontainer元素啓動並運行它。嘗試這樣的事情一次對每個運行：

function addIcon($el) { 
    var curElement = $el.get(0); // get DOM element 
    // proceed as above but without the for loop 
} 

Answer 2

這是代碼修改的部分，現在正常工作，並且在full script一個鏈接，如果有人想它。

waitForKeyElements(".ticketpostcontainer", addIcon); 

function addIcon($el) { 
    var curElement = $el.get(0); 

    var p = document.createElement('p'); 
    var a = document.createElement('a'); 
    var span = document.createElement('span'); 
    var strong = document.createElement('srong'); 

    GM_log("Node: " + curElement.className); //Debug 

    var node = curElement.getElementsByClassName('ticketpostbarname'); 
    var posterName = node[0].textContent; 
    GM_log("Poster Name: " + node[0].textContent); //Debug 

    node = curElement.getElementsByClassName('ticketbarcontents'); 
    var postDate = node[0].textContent; 
    GM_log("Post Date: " + node[0].textContent); //Debug 

    styleLink(a); 
    styleParagraph(p); 
    styleSpan(span); 
    styleStrong(strong); 
    p.appendChild(a); 
    p.appendChild(span); 
    a.appendChild(document.createTextNode('-')); 
    span.appendChild(strong); 
    strong.appendChild(document.createTextNode(' ' + posterName)); 
    span.appendChild(document.createTextNode(" (" + postDate + ")")); 

    a.addEventListener("click", toggle, false); 

    curElement.parentNode.insertBefore(p, curElement);