DomQUERY help needed

[JohnT]

I need an array all of the IMG tags inside the following elements:

<a href="#" id="feed-1" class="">

<span class="body">Hat Style 1

<span class="desc">
images/hats/thumbs/custom1.jpg
</span>
</span>
</a>

( the above code will be repeated X number of times with different images, and I need to attach a click event to all of them ).


Will domQuery do this? If so, could someone post a complete example? I am having problems getting it to run.

Thank you.

JohnT.

[tryanDLS]

DomQuery is pre-alpha code. If you choose to use it, you're going to be pretty much self-supported. You could use the testbed from the blog as an example.

I believe DomQuery will do this, but if you can't get it to work you could do a getElementsByClassName (from YUI's DOM) looking for 'desc' class if that's unique to the elements.

[JohnT]

I ended up using this, which I am SURE is not the right way, but it works:




/*
* Attach Events to all Hat Template
* thumbnails that are located
* in the WEST region
*/
var allImages = document.images;
for(i=0; i<allImages.length; i++) {
if(allImages[i].parentNode.className == "desc"){
YAHOO.ext.EventManager.addListener(allImages[i], "click", myHat.changeTemplate);
}
}




It works. I just wish I knew how to use the domQuery, know what I mean?

Thank you for your reply.

JohnT.

[tryanDLS]

Between the blog post and the test application, there are at least 30 examples of queries you can do - that should give you a good base

[brian.moeskau]

Jack will fully comment it before release and provide examples I'm sure -- he just rolled it out as a pre-release, what, 3 days ago? Patience... ;)

And yes, DomQuery should handle what you need easily using either descendant or child selectors (not sure I fully understand the constraints of your query, so I don't know for sure). Disclaimer: I haven't actually used DQ myself yet, I'm just assuming based on what it should do. Selector reference if you need it: http://www.w3.org/TR/REC-CSS2/selector.html

I'm not a selector expert myself, but if you want only images within an anchor, then a child span, then another child span, you could try something like "span > span > a > img" as your query. You can also mix child and descendant selectors, depending on how strictly you want to match.

[JohnT]

Very much looking foreward to this. Thanks!

[jack.slocum]

It's best if you start with a container with an id to limit the scope of query (faster):

#my-id

Then you need the spans:

#my-id span

And you want the spans to have the class "desc":

#my-id span.desc

And last, you want the images:

#my-id span.desc img

There's your selector. Now, if you add this somewhere (it will be the default config in 0.40):

Ext.Element.selectorFunction = Ext.DomQuery.select;

You can do:


getEls('#my-id span.desc img').on('click', myHat.changeTemplate);

and you are done. :)

Ideally though, you should use delegation for this:


getEl('my-id').mon('click', function(e){
var t = e.getTarget();
if(t.tagName.toLowerCase() == 'img' && YAHOO.util.Dom.hasClass(t.parentNode, 'desc')){
myHat.changeTemplate(t);
}
});

Now you only have a listener on one element and it "delegates" the click for all images.

[JohnT]

WOW thanks, Jack.

That is so helpful!