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

Question

Is it possible to write a jQuery selector that only selects the first element that matches the criteria and stops there?

I am aware of the not-so-performant :first selector and the better .first() call, but both appear to select all the elements and then only return the one at position [0] .

Let's say I have 100 rows in a table and I need to do something to all of them. They don't have IDs, but rather a data-guid attribute with a unique value.

Here's an example with a list:

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

Unfortunately, this would run through each element 100 times, making the total DOM iterations reach 10,000. In reality, since GUIDs are unique, it should run through the first element 100 times and the last one only once, making it run 5,050 times.

I guess I'm wondering if there's a way to treat it like an ID selector, where it stops when it finds an element that meets the criteria and then breaks out of the loop.

--

squint's Solution (if my interpretation is correct)

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

this run only data.length times (see console log)

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

Answer 2

In jQuery you can use the :first selector to get only fhe first element of the collection, but, quoting the official jQuery documentation:

Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :first to select elements, first select the elements using a pure CSS selector, then use .filter(":first").

Both the :first selector and .filter() method don't really improve/boost your code so much.

If you only want to select the first element, then the best solution is to use document.querySelector() , that stops on the first element and returns it.

So here it is:

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