Question

我有一个HTML页面，我想将元素添加到特定列表中，如下所示：

<div id="list-of-divs">
<div id="name-specific-id">
// content
</div>

<div id="another-id">
//content
</div>
.
.
.
<div id="yet-another-id">
</div>

现在我想在该列表中添加新的div，例如以下内容：

<div id="new-option-panel">
<input id="first-textbox-id" type="text">
<input id="second-textbox-id" type=text">
<button>Add new option</button>

当然，添加是使用jQuery代码完成的。

我的问题是：在HTML代码中添加许多这样的id并在我的jQuery代码中依赖它们是一个好习惯，还是对于这两种HTML都是不好的做法和jQuery，我应该在我的jQuery代码中找到其他方法（例如，取决于DOM遍历）？

仅举例说明我的意思：是否会增加许多id缓慢的Javascript执行？

Answer 1

Id的查询速度更快，但维护起来非常繁琐，所以我会采取“性能损失”，并且只在必要时使用类和id才能使我的代码更加明显。在你的例子中，我可能会将id保留在div上，但输入元素不需要一个，一个简单的类将同时用于jQuery和CSS，甚至根本不用。

Answer 2

ID选择器后跟标记选择器是最佳选择器，因为它们直接映射到原生.getElementById()和.getElementByTag()方法

我建议您在遍历DOM时始终从最近的父ID下降。与大多数语言一样，您的特定应用程序始终需要考虑可读性/性能权衡。

查看这些效果指南以获取进一步的见解