Selecting a specific children element using jquery?
<p>I want to select specific children elements from the $el.html, there are two types of children elements, one with <code>&lt;span&gt;....&lt;/span&gt;</code>, the other has a span class <code>&lt;span class = "special"&gt;..&lt;/span&gt;</code> for example:</p>

<pre><code>var orig = $(".example").html()
    ,$el = $(".example")
    ,text = $.trim($el.text())
    ,words = text.split(" ")
    ,html = "";

for (var i = 0; i &lt; words.length; i++) {
    if (words[i] === "senior")
    html += "&lt;span class='special'&gt;" + words[i] + ((i+1) === words.length ? "" : " ") + "&lt;/span&gt;";
    else
        html += "&lt;span&gt;" + words[i] + ((i+1) === words.length ? "" : " ") + "&lt;/span&gt;";
   };
$el.html(html).children().hide().each(function(i){
 // if $('span.special')
  $(this).delay(i*200).fadeIn(700);
 // else (normal span)
  $(this).delay(i*600).fadeIn(900);
}).promise().done(function(){
       $('.example:first').html(orig)
    })
</code></pre>

<p>How can I tell the difference between the spans with and without the class within my 'each' call?</p>

<blockquote>
  <p>the working demo is here : <a href="http://jsfiddle.net/6czap/15/" rel="nofollow">http://jsfiddle.net/6czap/15/</a></p>
</blockquote>
