-1

我在页面上显示了许多不同的 Div 元素。其中一些相互之间有一些关系：例如，一个附加在另一个上。

我需要动态地添加、删除和更新它们中的许多，所以要随时访问它们，我想到了两个选项：

给每个 div 唯一的 ID，然后getElementById在我需要的时候做，

或者，提供尽可能少的 ID 并由其父级访问子 div。为此，我必须做这样的事情：

$(parentDiv).attr("child", childDiv), or $(parentDiv).data("child", childDiv)"

并通过以下方式获取子元素：

$(parentDiv).attr("child"), or $(parentDiv).data("child")

我的问题是，哪种方式更有效（更快，这被认为是更好的设计，等等..）。

4

3 回答 3

2

或者，提供尽可能少的 ID 并由其父级访问子 div。为此，我必须这样做：$(parentDiv).attr("child", childDiv) 或 $(parentDiv).data("child", childDiv)"

并使用 - $(parentDiv).attr("child") 或 $(parentDiv).data("child") 获取子元素

这不是您访问子元素或后代元素的方式。您使用children,find等。

我的问题是，哪种方式更有效（更快，这被认为是更好的设计，等等..）。

这些可能是单独的问题。您不太可能比通过 更有效地访问元素，但是如果您的结构是合理的id，那么在效率上与在结构上找到它之间的差异可能不会很大。您可以从中导航的几个锚点就足够了。

如果没有有关您的结构的更多信息，很难提供一个可靠的示例，但让我们考虑一个相当经典的表格案例，您希望在其中响应对单元格的点击：

<table>
<tbody id="foo">
<tr data-info="first row">
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr data-info="second row">
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>

希望根据对其他单元格的点击来更新单元格是很常见的。您可以通过使用表的 ID、事件委托和结构遍历方法来做到这一点。

$("#foo").on('click', 'td', function() {
    // `this` is the cell that was clicked. If I want row-level data, I'd use:
    alert("This row's info is " + $(this).closest('tr').data('info'));

    // Or maybe I want the last cell in the row
    alert("Last cell's text: " + $(this).siblings().last().text());
});
于 2013-02-11T14:21:34.100 回答
0

为了更好的设计方法，尽量避免使用 id 创建动态元素。如果您只是根据动态添加的元素的需要创建 css 类，它通常要简单得多并且（更容易调试）。

如果您动态创建您的 id，您始终必须确保给定的 id 在页面上是唯一的，这将导致非平凡页面的复杂性。除此之外，IE 和 Chrome 对非唯一 ID 的处理方式不同（也取决于浏览器版本），这使得调试非常令人沮丧。

于 2013-02-11T14:24:20.220 回答
0

给元素一个类名，这样你可以将元素组合在一起，然后你可以使用 jQuery 直接访问它们。所以 parent1 下的任何东西都会给 parent1 类等

 $('.parent1').remove();  // will remove all parent1 classes
于 2013-02-11T14:24:41.340 回答