Hello People,
Suppost that i have this structure:
html 0
/ \
/ \
/ \
head 0.0 body 0.1
/ / \
/ / \
title 0.0.1 / \
| div 0.1.0 div 0.1.1
"Some" / \
h1 0.1.0.0 h1 0.1.1.0
/ \
b 0.1.0.0.0 b 0.1.1.0.0
| |
"This" "This too"
Suppose that I dispatch an event when I stays on the "This" word, with
mouseover, that changes the color of this, but changes the color too
for the sames node in other similar "group", like "This
too".
The basic question is how can to generate this string ''body div h1
b''
when I stays on "This" or basically how can I know the structure of
nodes that has this node where I stays.
Or basically what can I do..... to change color of "This too" when
I''m
on "This" only following the DOM.
Sorry if I not very clear is really complex to explain.
Thank in advance.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
> The basic question is how can to generate this string ''body div h1 b'' > when I stays on "This" or basically how can I know the structure of > nodes that has this node where I stays.What you are saying here, is given the element "b", how can you derive a CSS-style selector that shows the path to that element? Or do you want to just style up elements that match a certain path when a certain event occurs? If the latter, you can do something like: $$( ''div h1 b'' ).invoke( ''setStyle'', { color: ''red'' } ) // set by CSS properties $$( ''div h1 b'' ).invoke( ''addClassName'', ''my-class'' ) // just add a class // the above is shorthand for: $$( ''div h1 b'' ).each( function( element ){ element.setStyle( { color: ''red'' } ); element.addClassName( ''my-class'' ); }); If you''d like to derive the selector, given an element somewhere in the DOM, I''m not sure how to do that, but possibly XPATH can aid in that task. -justin --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On 11 jan, 05:47, Pin <pintolao...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Hello People, > > Suppost that i have this structure: > > html 0 > / \ > / \ > / \ > head 0.0 body 0.1 > / / \ > / / \ > title 0.0.1 / \ > | div 0.1.0 div 0.1.1 > "Some" / \ > h1 0.1.0.0 h1 0.1.1.0 > / \ > b 0.1.0.0.0 b 0.1.1.0.0 > | | > "This" "This too" > > Suppose that I dispatch an event when I stays on the "This" word, with > mouseover, that changes the color of this, but changes the color too > for the sames node in other similar "group", like "This too". > > The basic question is how can to generate this string ''body div h1 b'' > when I stays on "This" or basically how can I know the structure of > nodes that has this node where I stays. > > Or basically what can I do..... to change color of "This too" when I''m > on "This" only following the DOM. > > Sorry if I not very clear is really complex to explain. > > Thank in advance.It might make it a lot easier if you gave similar nodes the same classes, even if it is just for accessing them and not styling. To take your example: <html> <head> <title>Some</title> </head> <body> <div> <h1><b class="group1">This</b></h1> </div> <div> <h1><b class="group1">This too</b></h1> </div> </body> </html> The you would be able to do something like this: $$(''.group1'').invoke(''observe'', ''click'', listener); function listener(el) { $$(''.''+el.className).invoke(''addClassName'', ''clickclass''); } I haven''t tested it, so don''t shoot me if it doesn''t work... but it''s just the general idea Greetz, Wizz --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Well I think I am in favor of the class solution to group similar
nodes but I''ll throw this out there.
You could iterate over the event node''s ancestors, build a CSS
selector based off ancestor tag names and then throw that into the $$
function and you should get a collection of nodes that are of the same
depth.
$$("html > body > div > h1 > b").each(changeColor);
Cheers,
Matt
On Jan 11, 3:45 am, Wizz
<woutaw...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> On 11 jan, 05:47, Pin
<pintolao...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
>
>
> > Hello People,
>
> > Suppost that i have this structure:
>
> > html 0
> > / \
> > / \
> > / \
> > head 0.0 body 0.1
> > / / \
> > / / \
> > title 0.0.1 / \
> > | div 0.1.0 div 0.1.1
> > "Some" / \
> > h1 0.1.0.0 h1 0.1.1.0
> > / \
> > b 0.1.0.0.0 b 0.1.1.0.0
> > | |
> > "This" "This
too"
>
> > Suppose that I dispatch an event when I stays on the "This"
word, with
> > mouseover, that changes the color of this, but changes the color too
> > for the sames node in other similar "group", like "This
too".
>
> > The basic question is how can to generate this string ''body
div h1 b''
> > when I stays on "This" or basically how can I know the
structure of
> > nodes that has this node where I stays.
>
> > Or basically what can I do..... to change color of "This
too" when I''m
> > on "This" only following the DOM.
>
> > Sorry if I not very clear is really complex to explain.
>
> > Thank in advance.
>
> It might make it a lot easier if you gave similar nodes the same
> classes, even if it is just for accessing them and not styling.
>
> To take your example:
>
> <html>
> <head>
> <title>Some</title>
> </head>
> <body>
> <div>
> <h1><b class="group1">This</b></h1>
> </div>
> <div>
> <h1><b class="group1">This
too</b></h1>
> </div>
> </body>
> </html>
>
> The you would be able to do something like this:
>
> $$(''.group1'').invoke(''observe'',
''click'', listener);
>
> function listener(el) {
>
$$(''.''+el.className).invoke(''addClassName'',
''clickclass'');
>
> }
>
> I haven''t tested it, so don''t shoot me if it
doesn''t work... but it''s
> just the general idea
>
> Greetz,
>
> Wizz
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Yes Justin but note, that is the event is on b 0.1.0.0.0 "This" i don''t know my own path to this element from the parent ''div h1 b'', then i can''t change color for example in b 0.1.1.0.0 "This too" node. That''s what I need to find out. Thank a lot --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thank you Greetz, but the idea is not touch anything, becouse of that I thinks in use DOM in this case. Thank you again. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thank Matt, And Yes, I''m looking just what you says but don''t know how to implement it, Do you have a sample page by hand? or something to guide me. Thank a lot to all. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
If you want to get the ancestors of an element you can call
Element.ancestors [1]. If you want to extract the same property of
every object of an array, you can use Enumerable.pluck [2].
So to construct a selector like the one Matt suggests, you can do:
var selector =
element.ancestors().pluck("nodeName").invoke("toLowerCase").join("> ");
Best,
-Nicolas
[1] http://prototypejs.org/api/element/ancestors
[2] http://prototypejs.org/api/enumerable/pluck
On Jan 11, 2008 7:41 PM, Pin
<pintolaonda-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> Thank you Greetz, but the idea is not touch anything, becouse of that
> I thinks in use DOM in this case.
>
> Thank you again.
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
> var selector = element.ancestors().pluck("nodeName").invoke("toLowerCase").join(" > > ");Quite a handy little piece of code there Nicolas, with a slight modification to append the element ID and that''d be a great Element utility method. -justin --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Actually, I just noticed it''s missing the current element :-\
var selector =
element.ancestors().pluck("nodeName").invoke("toLowerCase").join("> ");
selector += " > " + element.nodeName; // yup, that''s ugly
:)
I don''t really see how many times you''d need an
"exact" selector like
this one to get all nodes with the same "ancestorship" (is that even a
word?), so I don''t know how useful that''d be as an Element
method.
What would might be a little more useful (but again, not that much, so
I don''t know) is something that gets all the children at a specified
level, ignorant of who the intermidiate nodes are.
So on the OP''s example, something that would collect all the <b>
tags
by calling $(document.body).childrenAt(3);
Element.addMethods({
childrenAt: function(element, level) {
if (level < 1)
return element.previousSiblings().concat(element, element.nextSiblings());
return element.childElements().map(function(e) {
return e.childrenAt(level - 1);
}).flatten().uniq();
}
});
Something like that might do it (haven''t tested it much), but
it''s
gonna be slow like hell on large trees.
Best,
-Nicolas
On Jan 11, 2008 8:13 PM, Justin Perkins
<justinperkins-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
> > var selector =
element.ancestors().pluck("nodeName").invoke("toLowerCase").join("
> > > ");
>
> Quite a handy little piece of code there Nicolas, with a slight
> modification to append the element ID and that''d be a great
Element
> utility method.
>
> -justin
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
To tidy that up, what if you push or unshift (not sure which you need) the current element before the pluck but after the anscestors... that should get the current element into the chain. Gareth On Jan 12, 2008 11:13 AM, Justin Perkins <justinperkins-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > > var selector = element.ancestors > ().pluck("nodeName").invoke("toLowerCase").join(" > > > "); > > Quite a handy little piece of code there Nicolas, with a slight > modification to append the element ID and that''d be a great Element > utility method. > > -justin > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On Jan 12, 2008 9:58 AM, Gareth Evans <agrath-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> To tidy that up, what if you push or unshift (not sure which you need) the > current element before the pluck but after the anscestors... > that should get the current element into the chain.Good idea. It''d be nice if Array methods like unshift and push returned this (Function#wrap to the rescue! :)) -Nicolas> > Gareth > > > > On Jan 12, 2008 11:13 AM, Justin Perkins <justinperkins-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > > > var selector > element.ancestors().pluck("nodeName").invoke("toLowerCase").join(" > > > > "); > > > > Quite a handy little piece of code there Nicolas, with a slight > > modification to append the element ID and that''d be a great Element > > utility method. > > > > -justin > > > > > > > > > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
So what was the final code? On Jan 14, 2008 12:33 PM, Nicolás Sanguinetti <godfoca-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > On Jan 12, 2008 9:58 AM, Gareth Evans <agrath-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > To tidy that up, what if you push or unshift (not sure which you need) > the > > current element before the pluck but after the anscestors... > > that should get the current element into the chain. > > Good idea. It''d be nice if Array methods like unshift and push > returned this (Function#wrap to the rescue! :)) > -Nicolas > > > > > Gareth > > > > > > > > On Jan 12, 2008 11:13 AM, Justin Perkins <justinperkins-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> > wrote: > > > > > > > > > > var selector > > element.ancestors().pluck("nodeName").invoke("toLowerCase").join(" > > > > > "); > > > > > > Quite a handy little piece of code there Nicolas, with a slight > > > modification to append the element ID and that''d be a great Element > > > utility method. > > > > > > -justin > > > > > > > > > > > > > > > > > > > > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Sorry for delay, I had to made a bit research, because I''m not very
good with prototype.
Thank you to all for your great help.
Finally I used this
element.ancestors().pluck("nodeName").invoke("toLowerCase").reverse().join("
");
It amazing like works!!!, the last question is why not invoke can be
used in reverse and join?
Thanks again, to Nicolás, Justin, Gareth and all really very good
library and the best comunity!!!.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---