How do I get all spans created in my HTML page using jQuery

Question

I'm getting all input texts in my HTML page by using this:

 var inputs = data.context.find(':input');
 $('#result').text(JSON.stringify(inputs.serializeArray()));

Then I have an JSON string with id and value of each input text.

I'm trying to do something similar but with all my spans. I have this in my HTML file:

 <td class="name"><span>{%=file.name%}</span></td>

I can have as many <td class="name"> ... tags as I want. So I have to get the value of all of them and convert to an JSON string as I did with the input text above.

How can I do it?

Answer 1

Iterate over .name (or specifiy deeper if necessary), build your data structure (using data), and then convert it to JSON. Working example: http://jsfiddle.net/tLuPC/

Below is simulating id if you needed to obtain that as mentioned in your post. Using data- attribute to store info. Otherwise you can simply just obtain the name.

var data = [],
    jsonData = null;

$('.name').each(function () {
    var item = $(this);

    data.push({
        id: item.data('id'),
        name: $('span', item).text()
    });
});

jsonData = JSON.stringify(data);

console.log(JSON.stringify(jsonData));