jQuery：唯一的 Each() var append答案

【问题标题】：jQuery: Unique Each() var appendjQuery：唯一的 Each() var append
【发布时间】：2011-09-06 06:40:32
【问题描述】：

我将 XML 文件中的一些按钮附加到一些 div 中。每个 div 中都有一两个按钮。

在每个 Each() 中，通过 var 附加按钮。但是在每个按钮插入后， Each() 会覆盖 var。

如何为每个追加创建一个唯一的 var？？

这是我想要的“buttonMarkup”，作为唯一的变量，所以它们不会相互覆盖......

$(this).find('button', this).each(function(index) {
    var type = $(this).attr("type");
    var label = $(">label", this).text();
    var wunLink = $(">link", this).text();
    buttonMarkup = "<a href='" + wunLink + "' class='" + type + "'><span>" + label + "</span></a>";
});

我该怎么做？？

提前谢谢你... :-)

【问题讨论】：

仅供参考，.find() 方法只接受一个参数。 $(this).find('button') 等效于 $('button', this)。然而，前者更受欢迎。另外，HTML 属性不应该有双引号吗？
我们能看到你使用 buttonMarkup 的代码吗？

标签： jquery append each var

【解决方案1】：

如果你正在处理一个大字符串，你可以像这样连接：

$(this).find('button').each(function(index) {
    var type = $(this).attr("type");
    var label = $(">label", this).text();
    var wunLink = $(">link", this).text();
    buttonMarkup += "<a href='" + wunLink + "' class='" + type + "'><span>" + label + "</span></a>";
});

或者，如果您想要单独的变量，我推荐您可以添加 (.push()) 并进行管理的数组，如下所示：

var buttonMarkupArray = [];
$(this).find('button').each(function(index) {
    var type = $(this).attr("type");
    var label = $(">label", this).text();
    var wunLink = $(">link", this).text();
    buttonMarkupArray.push("<a href='" + wunLink + "' class='" + type + "'><span>" + label + "</span></a>");
});

例如把它变成一个字符串只是一个简单的.join()，像这样：

var buttonMarkup = buttonMarkupArray.join('');

您还可以使用.find() 进一步清理您的选择器，这将更好地使用本机选择器引擎，如下所示：

var buttonMarkupArray = [];
$(this).find('button').each(function(index) {
    var type = $(this).attr("type");
    var label = $(this).find("label").text();
    var wunLink = $(this).find("link").text();
    buttonMarkupArray.push("<a href='" + wunLink + "' class='" + type + "'><span>" + label + "</span></a>");
});

或者更好地使用.map()，像这样：

var buttonMarkupArray = $(this).find('button').map(function() {
    var type = $(this).attr("type");
    var label = $(this).find("label").text();
    var wunLink = $(this).find("link").text();
    return "<a href='" + wunLink + "' class='" + type + "'><span>" + label + "</span></a>";
}).get();

【讨论】：

【解决方案2】：

你可以创建一个数组：

var buttonMarkup = [];

$(this).find('button').each(function(index) {
    var type = $(this).attr("type");
    var label = $(this).children("label").text();
    var wunLink = $(this).children("link").text();
    buttonMarkup.push("<a href='" + wunLink + "' class='" + type + "'><span>" + label + "</span></a>");
});

或者只是附加到变量：

buttonMarkup += "<a href='...";

还要注意它应该是$(this).find('button').each(...。

【讨论】：

【解决方案3】：

只有一个 + 到相等，它会连接字符串

$(this).find('button', this).each(function(index) {
    var type = $(this).attr("type");
    var label = $(">label", this).text();
    var wunLink = $(">link", this).text();
    buttonMarkup += "<a href='" + wunLink + "' class='" + type + "'><span>" + label + "</span></a>";
});

那么你将在 buttonMarkup 中有一个长字符串，你可以用它来追加（buttonMarkup）

【讨论】：

我这样做了，并在整个每个函数之前添加了“buttonMarkup = ''”。谢谢。