Help me understand this one line of jQuery.

Question

var div = $(this), ul = $("ul", div), li = $("li", ul);

Please explain, what does this code do?

By steps.

Thanks.

Answer 1

It ends up with these equivalents:

var div = $(this);
var ul = $(this).find("ul");
var li = $(this).find("ul").find("li");

So it's getting the current <div>, any <ul> elements inside it, and any <li> elements inside those, and placing each collection in its own variable.

When you do $(selector, content) you're actually doing $(context).find(selector) under the covers, so the code in your question is just chaining one call to the next, effectively doing a .find() inside each time.