Question

我有一个函数，可以使用以下代码将一些按钮附加到div上，希望您可以帮我解决两个问题：

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

我总共添加了15个按钮，就像上面的示例一样。有没有办法写这个更短，而不是连续添加它们，例如通过对每个循环使用a，如果，我该如何实现呢？
我想在这些按钮之间插入一个或三个空格。如何使用上述功能执行此操作？我是否只需创建varSpace1=" "和varSpace3="  &nbsp"之类的变量，然后将它们添加到其中？

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

Answer 1

使用空间进行布局是不确定的。这意味着根据字体渲染大小，它将在下一个浏览器和下一个浏览器中看起来完全不同。

更好的方法是使用CSS来设置所需的确切差距。这更精确，更好地分离了关注点。

假设每个btnTopX变量类似于<button>Click me</button>，这将起作用：

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

#myDiv button {
    margin-left: 5px;
}

如果某些实例需要更大的间隙，请为该特定按钮添加一个类，并为该元素创建一个CSS选择器。

Answer 2

最好使用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初学者：如何在追加之间插入空格

2 个答案: