Question

When using jquery to locate a set of elements in an XML DOM structure;

Using .find with a CSS query will result in a result that can be iterated, however jquery will return all the results at that time, which is slow and pauses my UI.

How do I instead iterate over the results in a lazy fashion?

I observed that there is a .first() method, however I can’t find .next() in the documentation, what am I missing?

Answer 1

My best suggestion is to contain your searches. Never run global queries. If at all possible, start your search from an element that you can retrieve by ID (to limit the number of nodes to traverse)

For example instead of the following

var infoList = $("a.query span.info")

Use

var container = $('#myCt');
var infoList = container.find('a.query span.info');
// OR more simply (but I'm not sure jQuery optimizes the query)
var infoList = container.find('#myCt a.query span.info')