JQuery - delay and show text issue

Question

below i got some code, which should delay 2 seconds and hide previous span and show the next span, but i cant seem to get it to work.

  <style>
       span{ display:none}
 </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><script>
<div id="text"></div>
<script>
    var text = [
        "<span>Sent A blabla</span>",
        "<span>sent B</span><span>sent b bbb cont....</span>",
        "<span>Sent c...</span><span>Sent C2</span><span>sent c3</span>", ];

    var text = text[Math.floor(Math.random() * text.length)];
    jQuery('#text').html(text);
    jQuery('#text').show();
    jQuery('#text span:first').show();


  var delay = 2000;

  jQuery("#text span").each(function() {
      setTimeout( function(){ 
       var el = $(this);
        el.prev().hide();
        el.show();
      }, delay)
      delay += 2000;
  });
</script>

Answer 1

The problem is occurring because of your use of the keyword this.

Inside the for each statement you need to set a variable that is set to $(this) and then reference that variable in the timeout. Example below:

  var parent = $(this);
  setTimeout( function(){ 
   var el = parent;
    el.prev().hide();
    el.show();
  }, delay)
  delay += 2000;

JS Fiddle: http://jsfiddle.net/Lykwmfz8/

Answer 2

It's all in the code comments:

jQuery(function( $ ){ // FingerSaver: Use $ in the jQuery scope // It's also a DOM ready!

  var delay = 2000;       // You know this one :)
  var $text = $("#text"); // Cache your parent element

  // Elements Array.
  // You  have multiple SPANS per array key
  // (which is odd but OK... here's the array)
  var text = [
    "<span>Sent A blabla</span>",
    "<span>sent B</span><span>sent b bbb cont....</span>",
    "<span>Sent c...</span><span>Sent C2</span><span>sent c3</span>",
  ];

    // Append all SPANs to the #text parent:
    $text.html( text.join("") );
    // All SPANs are now inside #text but are hidden by CSS!

    // Get (cache) all appended SPANs
    var $spans = $text.find("span");

    // OK, how many SPANs we have?
    var tot = $spans.length;
    // (You had 3 array keys, but) 6 SPAN elements :)

    // Start c Counter with a random number
    var c = Math.floor(Math.random() * tot);

    // Create a function that will loop the texts
    (function loop() {
      c += 1;   // Increment counter
      c %= tot; // Reset counter back to 0 on reminder
      $spans.fadeOut(500).eq( c ).stop().fadeIn(500);
      setTimeout(loop, delay);
    }()); // Start!

});

#text span{
  position:absolute;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text"></div>

In the case you want to keep your collections of multiple SPAN elements and show as GROUPS than all you need to do is wrap every SPAN from an array key into a parent wrapper, and that do the same as above, just, instead of operating over SPANS you operate over their parents. Since you did not explained that well in your question the above is all I can give you so far.