add what contains in element along with array

Question

I'm trying to add the content of each span along with the value in the title attribute.

<div id="group-wrap" class="group">
    <span class="lbracket" title="&f">(</span>
    <span class="grouptitle" title="&f"> Group </span>
    <span class="rbracket" title="&f">) </span>
    <span class="username" title="&f"> Username </span>
    <span class="col" title="&f">:</span>
    <span class="text" title="&f"> Helo There! </span>
</div>

Here is what I have so far:

var str = [];
    $('#group-wrap span').each(function(){
        str.push($(this).attr('title'));
    });
    alert(str.join(''));
});

http://jsfiddle.net/B9QeK/3/

The output is &f&f&f&f&f (the value of each title attribute), but the expected output has the value, plus the content that is in the span. The value of the attribute should be appended before the content.

&f(&fGroup&f)&fUsername: &f text

How can I get this result?

Answer 1

Looks like you are looking for

str.push( this.getAttribute('title'), this.textContent || this.text );

As for performance reasons, you should not re-create a jQuery object for every single iteration. Even better, don't use jQuery at all to receive those values.

JSFiddle

And by the way, you can make usage of jQuerys .map() to do it a bit more elegant:

jQuery(function($){
    var str = $('#group-wrap span').map(function(){
        return this.getAttribute('title') + this.textContent || this.text;
    }).get();

    alert(str.join(''));
});

JSFiddle

Reference: .map()