Question

我有一系列jQuery附加，如下所示：

moveControls.append("<span>").find("span").last().addClass("absLeft").text("«");
moveControls.append("<span>").find("span").last().addClass("left").text(" ‹ ");
moveControls.append("<span>").find("span").last().addClass("right").text(" › ");
moveControls.append("<span>").find("span").last().addClass("absRight").text("»");

而且，把它写出来，似乎......凌乱，或者错综复杂。它工作得很好，但我想知道是否有任何我应该做的事情。也许是＆＃39;追加到＆＃39;但我仍然需要构建s。

我最大的问题是追加 - ＆gt;找到我刚刚添加的元素 - ＆gt;获取最后一个元素 - ＆gt;添加课程+文字。

我已经多次重复了我的代码，但作为一个新手，我只是想知道是否有更有效的方法来做到这一点。

如果这个问题过于宽泛，我会道歉。 Stackoverflow的新功能，这一直是我关注的问题。

Answer 1

一种方法是

$('<span />', {'class': 'absLeft',text: '«'}).appendTo(moveControls);
$('<span />', {'class': 'left',text: ' ‹ '}).appendTo(moveControls);
$('<span />', {'class': 'right',text: ' › '}).appendTo(moveControls);
$('<span />', {'class': 'absRight',text: '»'}).appendTo(moveControls);

但是创建一个字符串并在最后附加它会更有效率

var arrays = [];
arrays.push('<span class="absLeft">«</span>');
arrays.push('<span class="left"> ‹ </span>');
arrays.push('<span class="right"> › </span>');
arrays.push('<span class="absRight">»</span>');
moveControls.append(arrays.join(''))

Answer 2

您可以将所有类和文本放在2d数组中并循环它：

var arrList = [ ["absLeft","left","right","absRight"], ["«","‹","›","»"] ];

for(var i=0;i<arrList.length;i++)
      $('<span />', {'class': arrList[i][0],text: arrList[i][1]}).appendTo(moveControls);

通过这种方式，您的代码也可以灵活地在将来添加更多类型。

Answer 3

另一种方法是设置你要附加的所有HTML，然后只调用一次jQuery的append（）。

var arrows = '<span class="absLeft">«</span><span class="left"> ‹ </span><span  class="right"> › </span><span class="absRight">»</span>';

moveControls.append(arrows);

这减少了一些重复的jQuery代码（优化可读性），但可能无法像其他人提出的其他替代方案一样优化效率。

如何优化jQuery的序列追加？

3 个答案: