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

给定一组对象，如：

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);
});

<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>

但感觉很慢。这是在处理客户机上的大型数据网格，40列，250行。表中充满了单个值，一个数据矩阵，我需要找到单元格并修改值，以便更新整列数据

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

编辑：

因此，表的结构基本上如下所示：

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

<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=“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+']，表）
W3C声明ID应该是唯一的。因此，为选择指定id以外的任何内容通常都是多余的

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

这比您假设的示例执行得快得多，因为它直接映射到本机
document.getElementbyId（）
。另外，在这个示例中，假设jQuery必须手动遍历DOM，这是非常昂贵的



更新：
稍后您提到了对ID使用复合，因为不能保证包含唯一值的字段。这个解决方案是可行的，但是，我将对它进行扩展，以包括合理的名称空间以提高可读性，并防止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的情况下进行优化




W3C关于ids的规范：

关于jQuery优化的简要介绍：
W3C声明ID应该是唯一的。因此，为选择指定id以外的任何内容通常都是多余的

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

这比您假设的示例执行得快得多，因为它直接映射到本机
document.getElementbyId（）
。另外，在这个示例中，假设jQuery必须手动遍历DOM，这是非常昂贵的



更新：
稍后您提到了对ID使用复合，因为不能保证包含唯一值的字段。这个解决方案是可行的，但是，我将对它进行扩展，以包括合理的名称空间以提高可读性，并防止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的情况下进行优化




W3C关于ids的规范：

关于jQuery优化的简要介绍：
假设您有如下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');
})


p1

p2

p3
p4
$.map（事物，函数（事物，i）{
$（'divp'）.filter（函数（索引）{
返回$（this.attr（'id'）==thing.id；
}).css（'color'，'green'）；
})

假设您有如下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');
})


p1

p2

p3
p4
$.map（事物，函数（事物，i）{
$（'divp'）.filter（函数（索引）{
返回$（this.attr（'id'）==thing.id；
}).css（'color'，'green'）；
})

我会通过服务器端脚本（PHP、ASP等）生成类似的内容。就修改而言，为什么不给列设置一个ID，这样您就可以使用
$（“#idhere”）
快速访问它呢？如果我正在查看一个垂直列，也许可以查看索引而不是ID，然后只查找第一个和所有其他列的索引。此外，它不是一个getById，因为没有ID可设置，根据某些数据，有3种方法可以识别：（如果单元格当前为空，则没有数据，因此我必须按行id/列id查找。例如，我会通过服务器端脚本（PHP、ASP等）生成类似的内容。就修改而言，为什么不为列设置一个id，以便您可以使用
$（“#idhere”）快速访问它
如果我查看的是一个垂直列，也许可以查看索引而不是id，然后只查找第一个索引和所有其余的索引。此外，它不是getById，因为没有可设置的id，有3种方法可以根据特定数据识别它：（如果单元格当前为空，则没有数据，因此我必须按行id/列id查找它。例如，这假设有一个id开始，但没有：（也许我可以创建一个复合id，如
id=“vid destid”
，然后在
getElementById（vid+“-”+destid）上将它们连接在一起）
。只是指当该单元格有Id时，我无法分配它。@Phill请进一步了解问题中提到的数据集。没有任何“Id”或“名称”的指示为空。但是是的，如果你能提供一个复合id，选择会更快。很抱歉迟了答复。我更新了问题并使用了复合解决方案，速度更快，谢谢你给我这个想法。请随时用复合解决方案更新你的答案，我会将其标记为答案。这假设有一个id开始ith，它没有：（也许我可以制作一个像
id=“vid destid”
这样的复合id，然后将它们集中在一个
getElementById（vid+“-”+destid）
上。这意味着当该单元格有一个id时，我无法分配它。@Phill请进一步了解问题中提到的数据集