Question

I would like to select all elements within a container e.g. a div. It shouldn’t matter what kind of an element is within the container and it should be possible to select those elements without any classes assigned to them, to stay as flexible as possible.
I want to build this quickly written “logo-ticker” as a jQuery Plugin:

http://apkunden.de/dev/index.html

The goal is to make it possible to use this with any html element, not just imgs. I know a very common way to accomplish this is via the use of a class assigned to any relevant element. But as it turns out I’m a lazy person and I don’t want to assign all those classes :D.

Now I know there is the all selector (“*”) in jQuery and I thought of doing something like this:

    $("#container").find("*");

But then on the jQuery API page there is a warning that the all selector is very slow. Question now is, if it makes sense at all to use the (“*”) selector. If it has that much impact on performance I’d rather not be lazy…

Anyone with experience or advice with this?

Thx.

Answer 1

From the same docs (emphasize mine):

Caution: The all, or universal, selector is extremely slow, except when used by itself.

That sentence implies that$(this).find('* > p') is much slower than $(this).find('*'), so I think it’s pretty safe to do that, and I honestly can’t think of any better (as in efficient), since your requirements is to get all elements

EDIT:

As per my comment, from the children() docs:

The .children() method differs from .find() in that .children() only
travels a single level down the DOM tree while .find() can traverse
down multiple levels to select descendant elements (grandchildren,
etc.) as well.