DomQuery :next() question...

[fjanon]

DomQuery & CSS selector question:

How do I select the next node (sibling) (only the first one) with a specific class name of a node without specifying the tag name of the node I am looking for?

I tried:


first = Ext.get("firstheader");
// I want the id="firstcontent" node now
content = Ext.DomQuery.selectNode('*:next(.content)',first.dom);

without success. I also tried different variations of Dom.Query, Element.select, Element.query with the "next()" pseudo-selector but I always get either an empty array or composite.

Example:

I am looking for the first element with the "content" class starting from a node with the class "header". Basically the user clicks on the "header" and I need to do something with the "content".

My HTML structure:


<div id="Top" class="top">
<div id="firstheader" class="header">
First Header
</div>
<div id="firstcontent" class="content">
First content
</div>

<h2 id="secondheader" class="header">
Second Header
</h2>
<div id="secondcontent" class="content">
Second content
</div>
</div> <!-- id="Top" -->

I know that I can use the Element.getNextSibling() method, but I want a DOMQuery solution to be able to change the structure easily if need be.

I'll also post a request for a documentation addition in 1.1 for the definition of a "sample selector" in Dom.Query.

Thanks

Fred

[evant]

The reason your selector isn't working is because you're passing first.dom as the root, which means it's going to search for elements UNDER first.dom.

Try something like:

Ext.select('#firstheader:next(.content)')

[fjanon]

The reason your selector isn't working is because you're passing first.dom as the root, which means it's going to search for elements UNDER first.dom.

Try something like:

Ext.select('#firstheader:next(.content)')

Thanks, but I should have said that the "id"s are there only for debugging, in the final structure, there will be no "id"s or enclosing "Top" div. So '#firstheader" is not an option.

Any other suggestion starting from the "first" element and not any enclosing "div" like "Top" in my example or "document"?

Thanks

Fred

[evant]

So you want the first instance of firstcontent in the whole document?

If so, why not just

Ext.select('.firstcontent:first-child')

[fjanon]

So you want the first instance of firstcontent in the whole document?

If so, why not just

Ext.select('.firstcontent:first-child')

Nope. Starting from a node with a ".header" class, I want the next first sibling with a class ".content", not using "id"s or tags or parent nor document.

Basically I want you to tell me who is your next younger brother without having to ask your dad or your grand-grand-dad or the registry :))

The more I look at DomQuery, the more I think we can't do something as simple as that, because of the way CSS selectors are designed.

Fred

[evant]

[code[
var a = Ext.select('.header:next(.content)');
alert(a.getCount());
[/code]

Returns length of 2

[fjanon]

[code[
var a = Ext.select('.header:next(.content)');
alert(a.getCount());
[/code]

Returns length of 2

Yep, good start, that would work if I wanted all of them but I want only the one that's after the current ".header" clicked on. Not all of them, not the first one, not the last one, the one that's just after a specific node that I already have.

Fred

[evant]

Honestly, why not just use getNextSibling then? Seems you're trying to do it the hard way.

[fjanon]

Honestly, why not just use getNextSibling then? Seems you're trying to do it the hard way.

Thanks for trying hard...

As I wrote in my initial posting:
"I know that I can use the Element.getNextSibling() method, but I want a DOMQuery solution to be able to change the DOM structure easily if need be."

For me, CSS/XPath selectors are the easy way (when they can do the job) because of their flexibility. Change the DOM structure, change the selector. If I use a DOM method, then I have to rework the code.

I do use getNextSibling at the moment but I still have to check if the sibling I get has a ".container" class. If not, for example if a node gets inserted between the ".header" and ".container" nodes, I need to iterate over all the next siblings until I get one with the ".container" class. See why it's better to work with CSS/XPath selectors? They do that for you.

I wrote some XSLT code a couple of years ago and XSLT is really cool, I got 20 different output documents from the same XML input document just by changing the XPath selectors, nothing else.

Fred

[evant]

You still have to change something, whether it be the selector or a few lines of code. Does it really matter?