我有一个函数,它使用以下代码将多个按钮附加到div上,希望您对此有两个问题的帮助:

$(myDiv).append(btnTop1).append(btnTop2).append(btnTop3)...;



像上面的示例一样,我总共要添加15个按钮。有没有一种方法可以写得更短而不是将它们全部连续添加,例如通过为每个循环使用a,如果可以,如何实现呢?
我想在这些按钮之间插入一个或三个空格。如何使用以上功能执行此操作?我是否只创建varSpace1=" "varSpace3="  &nbsp"之类的变量,然后将它们附加到之间?


非常感谢您对此提供的任何帮助。

最佳答案

最好使用CSS规则进行间距。您可以定义一个CSS类,然后将其提供给按钮元素。

.my-button {
    margin-left: 5px;
}


要将一个类添加到您的按钮,您可以执行以下操作:

$(yourButton).addClass('my-button');


您还可以使用内联class属性:

<button class="my-button">some text</button>


现在,在不确切知道其余代码如何设置的情况下,我建议附加多个按钮时最好的改进就是利用append支持DOM元素数组这一事实。

$(myDiv).append([btnTop1, btnTop2, btnTop3]);


请注意,数组必须包含DOM元素,而不是jQuery对象。如果您的按钮变量是jQuery对象,则可以执行以下操作:

$(myDiv).append($.map([btnTop1, btnTop2, btnTop3], function ($btn) {
    return $btn[0];
}));


如果可以,您可以重构代码并在创建按钮时附加按钮:

var $buttonsFrag = $(document.createDocumentFragment());

$buttonsFrag.append($('<button class"my-button">text</button>'));

//...

$(myDiv).append($buttonsFrag);


注意:使用文档片段可以在单个重排中将按钮附加到DOM。

关于jquery - jQuery初学者:如何在追加之间插入空格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19769033/

10-12 03:15
查看更多