Question

I am missing something, I’m not sure why the function ‘addIcon()’ is being called multiple times.

Given:

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

Using the utility function waitForKeyElements, the result is that each div element receives my “collapse icon” three times:

// ==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 collapses all ticketpostcontainer elements, but waitForKeyElements will fire and run it for all three ticketpostcontainer elements. Try something like this to run it once for each:

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