Question

I’m trying to select a element that meets certain criteria. Right now I’m doing it like this:

$('[' + attr + '="' + name + '"]', el).filter('[type!="hidden"]').get(idx);

which is slow as hell (1400ms in Opera, ~120ms in Chrome)

Before this I had:

$('[' + attr + '="' + name + '"][type!="hidden"]', el).get(idx);

which was taking like 5-6 seconds in Opera.

(the function that has this code is called like 250-400 times in a page)

Anyway, it’s still slow because I’m doing many selects and the total load can still exceed 2 seconds in Opera, depending on the page content.

Do you think I can improve the query a little bit?

ps: “attr” has the name value (name attribute), I just had it as a variable to test if other attributes are faster

Answer 1

Try using a tag selector. This way the browser can offload some of the effort to getElementsByTagName instead of filtering over ALL elements. I’m guessing input based on the type=hidden qualifier.

$(el).find('input[' + attr + '="' + name + '"]').filter('[type!="hidden"]').get(idx);

//Don't actually call this too often unless the DOM is changing.  Cache it and then call the get function.
var resultSet = $(el.getElementsByTagName("input"))
    .add(el.getElementsByTagName("select"))
    .add(el.getElementsByTagName("textarea"))
    .filter(function() {
        //You may need to modify this section.  select and textarea don't have a type attribute.
        return this.getAttribute(attr) == name && this.getAttribute("type") == "hidden";
    });

//Call later
resultSet.get(idx);