0

给定一个对象数组，例如：

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

4

2 回答 2

2

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

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

这比您假设的示例执行得快得多，因为它直接映射到 native 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 关于 id 的规范：http: //www.w3.org/TR/html401/struct/global.html#h-7.5.2

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

于 2013-07-23T08:19:24.997 回答
1

假设你有这样的 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/

于 2013-07-23T08:56:51.127 回答