Question

I wanted to detect a span element while looping through a div element i.e.

<div class="example">
    These are some <span id ="special" class="anime">special</span> words 
   that should be faded in one after the other.
</div>

using javascript i split the words and fade them in one by one i.e.

JS:

 function doSomething(spanID) {
     alert(spanID);
     }

 var $el = $(".example:first"), text = $.trim($el.text()),
        words = text.split(" "), html = "";

    for (var i = 0; i < words.length; i++) {
        html += "<span>" + words[i] + ((i+1) === words.length ? "" : " ") + "</span>";
    };
    $el.html(html).children().hide().each(function(i){
      // if special span is detected
      // get the span id pass it to doSomething function 
      $(this).delay(i*200).fadeIn(700);
    });
    $el.find("span").promise().done(function(){
        $el.text(function(i, text){
           return $.trim(text);
        });            
    });

working example is here: http://jsfiddle.net/6czap/5/

everything works, it just that i need to detect any special spans so i can do something with them, and then the for loop should carry on doing what it deos. thanks

Answer 1

Try the following:

var orig = $(".example:first").html()
$el.html(html).children().hide().each(function(i){
  $(this).delay(i*200).fadeIn(700);
}).promise().done(function(){
   $('.example:first').html(orig);
});

demo!