html - Get data from multiple span using jquery

Question

I am currently getting data on click of submit button, the html code is as follows:

<p class="post-meta-ab">
    <span>
        <a href="#">Diamond Burs set of 30 pcs A-24</a>
    </span><br />

    <span>
        <i class="icon-circle"></i>
        Details: Diamond Burs set of 30 pcs very useful assorted shapes
    </span><br />

    <span>
        <i class="icon-circle"></i>
        Shipping Weight: 100 gms
    </span><br />

    <span>
        <i class="icon-circle"></i>
        Price: &#8364; 2.50
    </span><br />

    <span>
        <i class="icon-circle"></i>
        Quantity: 
        <input type="text" style="width:20px" maxlength="100" name="a1" id="a1" />        
        <input type="submit" value="Add" style="margin-top:-8px" class="btn btn-danger" name="asubmit" id="a1sub" />
    </span>
</p>

I am getting the span data using the following jquery code:

$('input[type=submit]').click(function(){
    var productname = $(this).parent().parent().text() + $(this).parents('p').find('input:text').val();
    alert(productname); 
});

Now I am getting the span data, but I want space after each span tag, please help me regarding the same.

Answer 1

Do it like this

$('input[type=submit]').click(function(){
var alldata = "";
$('span').each(function(){
    var $span = $(this);        
    var spanTxt = $span.text();
    alldata += spanTxt + " ";     
}); 
alert(alldata);
});

Here all data has all the spans text

Demo Fiddle

Here i have used some extra variable for showing current span their text for understanding, you can loose them up if you want