Search code examples
jqueryoperator-precedence

Operator precedence in selectors

When I write:

$(tableElement).find("thead input,img")

Will jQuery match inputs inside theads and also images?

Or will it match inputs inside theads and also images inside theads?

More general, what is the operator precedence in jQuery selectors? I could not find it anywhere.

Update:

Given the precedence, can I use parenthesis, or some other way to change it inside the selector string?

When I wrote precedence, I was talking about the precedence at which the selector string operators are parsed by jQuery, not anything about which elements are included first in the resulting jQuery collection.

Solution

  • The selector is totally clear. You are asking it to find:

    tableElement    // The table element's
  thead input   // inputs under thead of table element and
  img           // images under the table element

    This is like:

    .tableElement thead input,
.tableElement img {
}

    It selects the images under the table element and inputs under the thead, which is under the table element. I am not sure what's the precedence here.

    If you want something like both under the same parent, you need to use:

    $(tableElement).find("thead").find("input, img")
$(tableElement).find("thead input, thead img")

    The above will translate to:

    .tableElement thead input,
.tableElement thead img {
}

    This code will get both the img and input inside the thead present under the tableElement.

    When I wrote precedence, I was talking about the precedence at which the selector string operators are parsed by jQuery, not anything about which elements are included first in the resulting jQuery collection.

    Okay, to answer your latest question, there's no particular order. It's totally unordered and selects everything. jQuery just follows the CSS selector. It doesn't have any particular parsing order. Internally, everything is a querySelectorAll() and looping.