Find each div with specified class

Question

var data='<div class="shout_msg">
    <span class="username">3</span>
    <span class="message">hello</span>
</div>
<div class="shout_msg">
    <span class="username">0</span>
    <span class="message">yo</span>
</div>
<div class="shout_msg">
    <span class="username">0</span>
    <span class="message">hey</span>
</div>
<div class="shout_msg">
    <span class="username">0</span>
    <span class="message">haha</span>
</div>';

$(data).find(".shout_msg").each(function(index){ 
    console.log($(this).find("span.username").text() ); 
});

Its not returning anything. Basically the data, shown here in a variable, is coming from an AJAX request. But in any case I am doing a silly mistake or something. Please correct me.

Answer 1

You would want to use filter in this case since you're not searching inside the objects.

$(data).filter(".shout_msg").each(function(index){ 
  console.log( $(this).find("span.username").text() );
});

Here's a quick demo for you.

http://jsbin.com/ocefeq/1/edit