jQuery .filter(): exit before the end

Question

I have this code:

var image_match = $('#my_id image').filter(function(i, el) {
    return  el.attributes.x.value == x_image;
});

$('#my_id image') gives a very long array (some thousands) but luckily I know how many elements will pass the test (generally just one) so I could stop the 'loop' as soon as it finds the element(s). The problem is I don't know how to do (or if it's possible).

This is to increase the efficiency, so I'm looking for an efficient solution.

Maybe something like this, but is it efficient?

var target_number=3;//or whatever
var image_match = $('#my_id image').filter(function(i, el) {
    var counter=0;
    if (el.attributes.x.value == x_image) {
        counter+=1;
    };
    if (counter==target_number) {
        return  el.attributes.x.value == x_image;
        break;//return (false);//exit
    }
    return  el.attributes.x.value == x_image;
});

Answer 1

You can't break out of a filter() loop as it's designed to apply its logic to all elements.

If you want to exit a loop early, I'd suggest changing your logic to use each(). Then you can return false; to exit the loop:

var target_number = 3, matches = [];

$('#my_id image').each(function(i, el) {
  if (el.attributes.x.value == x) {
    matches.push($(this));

    if (matches.length == target_number)
      return false;
  }
});

matches will now be roughly equivalent to the content of your image_match variable, except it will be an array instead of a jQuery object.

Alternatively you can use map() to directly build an array which contains only the values required:

let matches = $('#my_id image').map((i, el) => el.attributes.x.value === x ? $(el) : null).get();