1

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

$(myDiv).append(btnTop1).append(btnTop2).append(btnTop3)...;
  1. 我总共添加了 15 个按钮，例如上面的示例。有没有办法写得更短，而不是把它们全部添加到一行中，例如，通过使用 for each 循环，如果，我该如何实现？
  2. 我想在这些按钮之间插入一到三个空格。如何使用上述功能做到这一点？我会只创建变量varSpace1=" "，varSpace3="  &nbsp"然后将它们附加到 between 吗？

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

4

2 回答 2

2

将空间用于布局目的是不确定的。这意味着它在一个浏览器和另一个浏览器之间看起来会完全不同，而在一台 PC 和另一个浏览器之间看起来会完全不同，具体取决于字体渲染大小。

更好的方法是使用 CSS 来设置您需要的确切间隙。这既更精确，也更好地分离了关注点。

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

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

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

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

于 2013-11-04T13:52:35.770 回答
1

间距最好使用 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。

于 2013-11-04T13:57:09.033 回答