Question

给定一系列对象，如：

var things = [{
   "id": "123a",
   "name": "456"
},{
   "id": 123b",
   "name": 456"
},{
   "id": "123c",
   name": "456"
},{
   "id": "123d",
   "name": "456"
}];

查找包含这些ID的所有元素的最快方法是什么。

目前我只是在做一些事情：

$.each(things, function(i, e) {
    $row = $('td[vid=' + e.id + ']', table);
});

但感觉很慢。这适用于客户端上的大型数据网格，40列，250行。表中包含单个值，一个数据矩阵，我需要查找单元格并修改值，因此我可以更新整个数据列。

想知道是否有更有效的方法来做到这一点。

编辑：

所以基本上表格结构如下：

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th vid="1">Version 1</th>
      <th vid="2">Version 2</th>
      <th vid="3">Version 3</th>
      <th vid="4">Version 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td destid="1">Dest 1</td>
      <td destid="2" vid="1">x</td>
      <td destid="2" vid="2">x</td>
      <td destid="2" vid="3">x</td>
      <td destid="2" vid="4">x</td>
    </tr>
    <tr>
      <td destid="2">Dest 2</td>
      <td destid="2" vid="1">x</td>
      <td destid="2" vid="2">x</td>
      <td destid="2" vid="3">x</td>
      <td destid="2" vid="4">x</td>
    </tr>
    <tr>
      <td destid="3">Dest 3</td>
      <td destid="3" vid="1">x</td>
      <td destid="3" vid="2">x</td>
      <td destid="3" vid="3">x</td>
      <td destid="3" vid="4">x</td>
    </tr>
  </tbody>
</table>

如果从版本的顶部选择，则结果为：

[{
  id: 5,
  vid: 2,
  destid: 1
},{
  id: 6,
  vid: 2,
  destid: 2
},{
  id: 7,
  vid: 2,
  destid: 3
}]

同样，在为所有版本选择目的地时也会类似。

我认为对我来说最好的方法是重构细胞：

id="2-1" | id="2-2" | id="2-3"

然后使用var cell = document.getElementById(data.vid + "-" + data.destid);

而不是目前正在寻找像这样的细胞：

var cell = $('td[vid=' + data.vid + '][destid=' + data.destid + ']', table);

Answer 1

W3C声明ID应该是唯一的。因此，为了选择而指定除id以外的任何内容通常是多余的。

$row = $('#' + e.id)

这比您假设的示例执行得快得多，因为它直接映射到本机document.getElementbyId()。此外，假设jQuery必须手动遍历DOM，这很昂贵。

<强>更新

您之后提到过将复合材料用于ids，因为无法保证包含唯一值的字段。这个解决方案是可行的，但是，我会扩充它以包含合理的命名空间 - 为了可读性，并防止id冲突（即：使用相同的id方案在同一页面上的两个表。）。

以下是基于更新约束的建议解决方案：

var vid_id = '1';
var dest_id = '1';
var dom_query = '#' + 'vid_id-' + vid_id +'dest_id' + dest_id;

$row = $(dom_query);

如果需要，可以在没有jQuery的情况下优化此解决方案。

关于ID的W3C规范： http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

jQuery优化的体面概要： http://24ways.org/2011/your-jquery-now-with-less-suck/

Answer 2

假设您有这样的HTML：

<div>
    <p id = "123a">p1</p>
    <p id = "123c">p2</p>
    <p id = "123d">p3</p>
    <p id = "122222">p4</p>
</div>

$.map(things,function(thing,i){
   $('div p').filter(function(index){
     return $(this).attr('id') == thing.id;
   }).css('color','green');
})

http://jsfiddle.net/jY2u6/

使用jQuery通过Ids数组查找所有元素的最快方法

2 个答案:

<强>更新