如何使用 jQuery 在我的 HTML 页面中创建所有跨度答案

【问题标题】：How do I get all spans created in my HTML page using jQuery如何使用 jQuery 在我的 HTML 页面中创建所有跨度
【发布时间】：2013-03-06 19:26:19
【问题描述】：

我通过以下方式在我的 HTML 页面中获取所有输入文本：

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

然后我有一个 JSON 字符串，其中包含每个输入文本的 id 和值。

我正在尝试做类似的事情，但我的所有跨度。我的 HTML 文件中有这个：

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

我可以拥有任意数量的<td class="name"> ... 标签。所以我必须得到所有它们的值并转换为 JSON 字符串，就像我对上面的输入文本所做的那样。

我该怎么做？

【问题讨论】：

我试过这个：$('#result').text($('.name span').text());但它 olny 返回一个跨度的值.. 我想一次得到所有这些
.val() 将给出文本输入的值。

标签： javascript jquery json html textinput

【解决方案1】：

这段代码 sn-p:$('.name span') 将返回一个对象数组，因此为了从每个对象中获取文本，您需要将其作为数组运行：

$('.name span').each(function(index,val){
   //do something with val
});

你可以看到对这个方法的引用here。

简单的小提琴：http://jsfiddle.net/CMdBa/1/

【讨论】：

【解决方案2】：

迭代.name（或在必要时指定更深），构建您的数据结构（使用data），然后将其转换为JSON。工作示例：http://jsfiddle.net/tLuPC/

下面是模拟id，如果你需要获得你帖子中提到的那个。使用data- 属性存储信息。否则，您只需获取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));

【讨论】：

【解决方案3】：

您可以使用map 函数来枚举和格式化集合。

var spanTextArray = $('td.name span').map(function(){
    return $.trim(this.innerHTML);
}).get();

这将输出一个文件名数组，您可以轻松修改返回以输出一个键值对数组。

【讨论】：