使用jquery使用类选择器或自定义属性选择器更好吗？

Question

我已经读过，使用jquery选择使用“id”比使用“class”更好。但是，假设我在页面上有几个div，我需要用jquery选择并执行相同的操作。我不能选择“id”属性，因为它不再是唯一的。例如：

<div id="selectMeOnClick">
    ...
</div>
<div id="selectMeOnClick">
    ...
</div>
... many more divs ...

让我（我认为？）有2个选择：

使用班级选择器

<div class="selectMeOnClick">
    ...
</div>

使用自定义属性选择器

<div data-select="selectMeOnClick">
    ...
</div>

我的问题是：这些真的是剩下两种选择吗？什么是最有效的解决方案？

由于

Answer 1

我会使用类选择器。使用自定义属性选择器将是：

1. HTML无效。 HTML只允许某些命名属性出现在某些类型的元素上。
2. 的慢即可。虽然jQuery可以在您的第一个代码段中使用原生.getElementsByClassName，但它不能用于第二个代码段。这可能会导致现代浏览器放缓。

Answer 2

是的，最好使用“id”而不是“class”和jquery。但不仅仅是jquery。这是一般方法。

在您的情况下，您必须提供更多信息。如果你想选择几个具有相同类的div - 可能所有的div都是其他div的子，e.t.c。你可以把它们作为一个div的孩子，你可以通过id获得。

您必须创建这样的DOM结构，您可以按ID或逻辑方式通过某些属性访问元素。

另外，如果你想在精确的css-class中改变一些css属性，那么按类来获取div并不是最糟糕的想法。

自定义属性选择也不是好方法。这是无效的。

Answer 3

ID是JavaScript中最快的。因为肯定只有一个元素（如果你的代码有效）。我认为类和自定义attr将是相同的速度。

我不喜欢使用自定义属性，因为它无效并且它使DOM非常混乱。我更喜欢使用.data()来存储相对于所选元素的数据。

Answer 4

对于像这样的简单选择，性能不会成为问题。但是如果您的div's位于带有Id的容器中，例如

<div id="Main">
    <div class="selectMeOnClick">
        ...
    </div>
    <div class="selectMeOnClick">
        ...
    </div>
</div>

更新：根据gdoron评论

然后最快的选择器将是$('#Main selectMeonClick')

Answer 5

我个人根据场合使用两者。例如，如果表中的一行表示我想要放置的一些数据但不是必须显示我使用自定义属性。有时写这样的东西真是太好了：

$("input[action=do-something]").click(function() { ... });

并且不会被迫乱用元素类。我意识到它有点慢，但考虑到它只在页面加载后发生一次，我可以忍受。