Filtering long lists of images I have to filter some very long lists of images many times (thousands, even 10/15k, even much more), so performance is important.

First solution:

var image_match = [];
$('#'+id_canvas+' image').each(function(i, el) {
    if (el.attributes.x.value === x &amp;&amp; el.attributes.y.value === y) {
        image_match.push($(this));
    };
});


Second solutions:

var image_match = $('#'+id_canvas+' image[x='+x+'][y='+y+']');


Which solution is faster? Or maybe a non-jQuery solution?

Also, I can often know how many images will pass the test so when I found that number of images I can stop the search, like this:

var image_match = [];
var target_number = 3;
$('#'+id_canvas+' image').each(function(i, el) {
    if (el.attributes.x.value === x &amp;&amp; el.attributes.y.value === y) {
        image_match.push($(this));
        if (image_match.length === target_number) {
            return false;
        };
    };
});


Can I do the same thing in the second solution?
I suspect that performance with 15k images will be bad no matter what you do. You might want to rethink your UI.

If you want to know which is the fastest solution you will have to measure them. Though I would guess the second is faster. You could test a direct document.querySelector though jQuery should be passing the query through pretty much as is. The one suggestion I would make is instead of interpolating your image_id each time give all of the images a class and use a class selector.

As to your last question, I don't know of anyway to do it using pure css and there would probably be little advantage anyway.