javascript - jQuery - 仅选择与性能匹配的第一个元素

Question

是否可以编写一个 jQuery 选择器，只选择符合条件的第一个元素并停在那里？

我知道性能不太好的 :first 选择器和更好的 .first() 调用，但两者似乎都选择了所有元素，然后只选择返回位置 [0] 处的值。

假设我的表中有 100 行，我需要对所有行执行一些操作。它们没有 ID，而是具有唯一值的 data-guid 属性。

这是一个带有列表的示例:

<ol>
    <li data-guid="guid_1">A</li>
    <li data-guid="guid_2">B</li>
    <li data-guid="guid_3">C</li>
    <li data-guid="guid_4">D</li>
</ol>

.

var data = [
    {guid: "guid_1", new_value: "I"},
    {guid: "guid_2", new_value: "II"},
    {guid: "guid_3", new_value: "III"},
    {guid: "guid_4", new_value: "IV"}
];

var $ol = $('#list');
for (var i = 0; i < data.length; ++i) {
    $('li[data-guid="' + data[i].guid + '"]', $ol).text(data[i].new_value);
}

不幸的是，这将遍历每个元素 100 次，使得 DOM 迭代总数达到 10,000 次。实际上，由于 GUID 是唯一的，因此它应该运行第一个元素 100 次，最后一个元素仅运行一次，从而使其运行 5,050 次。

我想我想知道是否有一种方法可以将其视为 ID 选择器，当它找到满足条件的元素时停止，然后跳出循环。

--

斜视解决方案(如果我的解释正确的话)

var data = [
    {guid: "guid_1", new_value: "I"},
    {guid: "guid_2", new_value: "II"},
    {guid: "guid_3", new_value: "III"},
    {guid: "guid_4", new_value: "IV"}
];

// Hashmap in case array is not the same order as list items, look up by GUID
var hashmap = {};
for (var i = 0, l = data.length; i < l; ++i) {
    hashmap[data[i].guid] = data[i];
}

var $ol = $('#list');
$('li[data-guid]', $ol).text(function () {
    var item = hashmap[$(this).attr('attr-guid')];
    return item ? item.new_value : 'N/A';
});

Answer 1

此操作仅运行 data.length 次(请参阅控制台日志)

    <ol id="list">
     <li data-guid="1">Coffee</li>
     <li data-guid="2">Tea</li>
     <li data-guid="5">Milk</li>
     <li data-guid="6">Water</li>
    </ol> 

    var $ol = $('#list');
    var data = [[1,"Saab"], [2,"Volvo"], [3,"BMW"], [6,"Nissan"]]; 
    for (var i = 0; i < data.length; ++i) {
       $ol.find('li[data-guid="' + data[i][0] + '"]').text(data[i][1]);
       console.log(i);
    }

http://jsfiddle.net/rLbd7fuc/