2010-11-18 52 views
9

我读过,最好选择使用“ID”比“类”与jQuery。但是,假设我在页面上有几个div,我需要用jquery进行选择并执行相同的操作。我不能选择“id”属性,因为它不再是唯一的。例如:使用类选择器或自定义属性选择器与jQuery的更好吗?

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

这让我(我想?)和2层的替代品:

使用类选择

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

使用自定义属性选择

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

我的问题是:这些确实是剩下的两种选择吗?什么是最有效的解决方案?

谢谢

回答

10

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

  1. 无效的HTML。 HTML只允许某些命名属性出现在某些类型的元素上。
  2. 较慢。尽管jQuery可以在您的第一个片段中使用原生.getElementsByClassName,但它不能在第二个片段中使用。这可能会导致现代浏览器速度放慢。
+32

至于#1 ... OPs示例在HTML 5中完全有效。 – 2010-11-18 12:34:21

+2

第二点为+1。 – BoltClock 2010-11-18 12:39:51

+0

感谢您的回答。正如上面的评论所说,它是有效的HTML5,所以这不是我的关注。与#2一样:我认为这是事实。这是一个慢的事实吗?如果是这样,我会将其标记为正确的答案。 – YakobeYak 2010-11-18 12:45:41

0

该ID是JavaScript中速度最快的。因为只有一个元素是肯定的(如果你的代码是有效的)。班级和自定义attr将会与我想的速度相同。

我不喜欢使用自定义属性,因为它是无效的,它使DOM非常混乱。我更喜欢使用.data()来存储与选定元素相关的数据。

1

是的,最好在jQuery中使用“id”而不是“class”。但不仅仅是jQuery。这是一般方法。

在你的情况你必须提供更多的信息。如果你想选择几个具有相同类的div - 可能它们都是其他div的子节点e.t.c.你可以把它们作为你可以通过身份证得到的某个div的孩子。

您必须创建这样的DOM结构,您可以通过id或逻辑上通过某些属性访问元素。另外,如果你想在精确的css-class中改变一些css属性,那么按类别获取div的最好办法就不是什么了。

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

0

对于像这样一个简单的选择性能不会是一个问题。但如果你的div's是有标识的容器内,例如

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

更新:根据gdoron评论

那么最快的选择将是$('#Main selectMeonClick')

+0

或$('#Main selectMeonClick')'是更好的... – gdoron 2012-03-20 13:57:36

+0

它是如何更好? – 2012-03-20 16:50:23

+1

它不需要构造一个新的jQuery对象。 – gdoron 2012-03-20 17:01:49

0

我个人使用都取决于场合。例如,如果表格中的一行代表了我想要放置但不必显示的一些数据,则使用自定义属性。有时候写这样的东西真的太好了:

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

而不是被迫乱搞元素类。我意识到它有点慢,但考虑到它只发生在页面加载后一次,我可以忍受。