jQuery-like DOM selections / expressions

[Alex]

Hi Jack,

first I have to say a big thank you for your fantastic, versatile and free YUI Extensions!

However, one feature I truly miss from the jQuery lib (http://jquery.com/), which makes DOM coding a lot more easy and intuitive, is the ability to query/select DOM elements using various types of expressions (http://jquery.com/docs/Base/Expression/). For example this way you could fetch an element using the ID, a CSS rule, via XPath or also by using some custom jQuery selectors. jQuery also allows you to loop through the result if there are more elements matching the expression.

Is there any possibility something like this could make it into your YUI Extensions?

Regards,

Alex

ps: Check your paypal account as it should have gained value.. ;-)

[jack.slocum]

Alex, thank very much for your donation.

Your request will be top priority as soon as I finish the BoderLayout implementation and testing. The implementation will be a little different than JQuery, but I think you will be happy. The idea is to implement a composite YAHOO.ext.Element which allows to work with multiple elements as 1 and selecting what goes into the CompositeElement will be done via a jQuery like selector.

For example, something like this:


// returns 10 elements
var divs = YAHOO.ext.Element.select("#foo div.bar");

// all YAHOO.ext.Element methods operate on the 10 divs as 1
divs.setWidth(100);
divs.show(true); // fade all 10 in


I'm sure there will be a shorthand function like "getEl()" as well defined.

Is this what you meant?

[Alex]

Thank you Jack for your quick reply! Your solution sounds nice and I'll brainstorm some more time about it tomorrow. So just some quick thoughts:

It would also be nice if I could do this with a selected result:


var divs = YAHOO.ext.Element.select("#foo div.bar");
divs.each(function(){
// do something with the single element
});


But here we'd have to check out if it's better inside the each method to point "this" to the current DOM element or to the YUI Ext element, I guess.

One more nice thing about jQuery are the chainable methods:


YAHOO.ext.Element.select("#foo div.bar").each(function(){
this.css({ width: 100px, height:100px });
}).show(true);


What do you think about this; and do you think this could be realized? Or maybe it's just a little too jQuerish?

[jack.slocum]

Two things about that code:

I generally don't do the each() or those type methods. IMO, I think they lead to
a) unreadable hard to follow code
b) hard to dive in code (everyone understands a 'for' loop)
c) slow code (you would be shocked by the benchmarks)

For example, I consider myself to be a fairly advanced JavaScript developer. But when I view the source for scriptaculous which makes heavy use of this type of code, even I can't read it. All I see are tons of nested anonymous functions and chained method calls. Following the code is almost impossible. It's quick and easy to write, but IMO it's also dirty (if that makes sense). If you open the source for yui-ext, generally even a JR/mid level js developer can follow it easily.

I understand both these things can make development faster. Both would also be easy to add in. They just go against design principles which years of development have beat into my head. :)