Paul, one recommendation: store the results of element.nextSiblings() in a local variable outside of the loop. DOM traversals are pretty slow.
Best, Alex On Mon, Feb 22, 2010 at 12:28 PM, Paul Kim <[email protected]> wrote: > Hi Walter, if you want to get all similar elements up to but not including > the next head, I would use Prototype's Element.nextSiblings() to loop > through all elements with the same tagName and break when the tagName is > different. Here is a function I created just now that would hopefully do > what you want: > > function getSimilarElements(element) { > var element = $(element); > var similarElements = new Array(); > for (var i=0; i< element.nextSiblings().length; i++) { > if (element.tagName == element.nextSiblings()[i].tagName) { > similarElements[i] = element.nextSiblings()[i]; > } > else { > break; > } > } > return similarElements; > } > > Here is the entire example as well: > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> > <title>Demo</title> > <script type="text/javascript" src=" > http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js > "></script> > <script type="text/javascript" src=" > http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js > "></script> > <script type="text/javascript"> > document.observe("dom:loaded", function() { > function getSimilarElements(element) { > var element = $(element); > var similarElements = new Array(); > for (var i=0; i< element.nextSiblings().length; i++) { > if (element.tagName == element.nextSiblings()[i].tagName) { > similarElements[i] = element.nextSiblings()[i]; > } > else { > break; > } > } > return similarElements; > } > > console.log(getSimilarElements('foo')); > }); > </script> > <style type="text/css"> > body {margin:0; padding:0;} > </style> > </head> > <body> > <div> > <h3>first header</h3> > <p id="foo">first paragraph</p> > <p>second paragraph</p> > <h3>second header</h3> > <p>third paragraph</p> > <p>fourth paragraph</p> > <p>fifth paragraph</p> > <h3>third header</h3> > <p>sixth paragraph</p> > <p>seventh paragraph</p> > </div> > </body> > </html> > > > > On Mon, Feb 22, 2010 at 8:22 AM, Walter Lee Davis <[email protected]>wrote: > >> Thanks very much. I was looking in the wrong place for the functionality I >> need. You've given me the bones I need to build on. >> >> Walter >> >> >> On Feb 22, 2010, at 11:07 AM, Alex Wallace wrote: >> >> I whipped up something that should handle the task, although I'm sure >>> this could be optimized using the nextElementSibling. This version grabs >>> nextSiblings() and then filters them, but the faster way would be to iterate >>> over the `element.nextSibling` and break when it encounters a different tag >>> name (instead of finding them all, which is bound to be slower). >>> >>> But here goes: >>> >>> function consecutiveSameTagSiblings(element) { >>> element = $(element); >>> var siblings = element.nextSiblings(), results = []; >>> if (!siblings[0]) return results; >>> var tagName = siblings[0].tagName.toLowerCase(); >>> for (var i = 0, sibling; sibling = siblings[i]; ++i) { >>> if (sibling.tagName.toLowerCase() === tagName) >>> results.push(sibling); >>> else >>> break; >>> } >>> return results; >>> } >>> >>> Best, >>> Alex >>> >>> >>> On Mon, Feb 22, 2010 at 10:38 AM, Walter Lee Davis <[email protected]> >>> wrote: >>> Hmmm. That's not a documented function. I had a look at the source, and I >>> can't see how it works. It accepts a node as its only argument, and it >>> doesn't seem to perform any comparison as it executes. How then would I get >>> it to stick to just the one type of sibling, and how would I get it to stop >>> when it ran out of similar siblings? >>> >>> Thanks as always for any pointers. >>> >>> Walter >>> >>> >>> On Feb 22, 2010, at 10:29 AM, Alex Wallace wrote: >>> >>> You'll want to leverage Prototype's nextElementSibling function. That >>> function grabs element.nextSibling and traverses until it finds an an actual >>> element (by checking nodeType). >>> >>> You could wrap a function around that which stores the tagName of the >>> first element it matches, and then continues to find nextElementSibling >>> until it either returns null, or break when the tagName doesn't match the >>> original tagName. >>> >>> Take a look at the innards of Element.adjacent and >>> Element.nextElementSibling for an idea of what I mean. >>> >>> Best, >>> Alex >>> >>> On Mon, Feb 22, 2010 at 12:00 AM, Walter Lee Davis <[email protected]> >>> wrote: >>> I have a structure like this inside a parent DIV: >>> >>> H3 >>> P >>> P >>> H3 >>> P >>> P >>> P >>> H3 >>> P >>> P >>> >>> And I'd like to be able to get the paragraphs between two heads, or >>> between the last head and the end of the parent DIV. Element.adjacent('p') >>> doesn't do what I need -- it returns all the p tags in the entire DIV, since >>> everything is at the same level. If I get a reference to the first element >>> following the head, how could I get all similar elements up to but not >>> including the next head? I'm trying to find a purely structure based way to >>> do this, rather than adding classnames to the elements. >>> >>> Thanks, >>> >>> Walter >>> >>> -- >>> You received this message because you are subscribed to the Google Groups >>> "Prototype & script.aculo.us" group. >>> To post to this group, send email to >>> [email protected]. >>> To unsubscribe from this group, send email to >>> [email protected]<prototype-scriptaculous%[email protected]> >>> . >>> For more options, visit this group at >>> http://groups.google.com/group/prototype-scriptaculous?hl=en. >>> >>> >>> >>> -- >>> You received this message because you are subscribed to the Google Groups >>> "Prototype & script.aculo.us" group. >>> To post to this group, send email to >>> [email protected]. >>> To unsubscribe from this group, send email to >>> [email protected]<prototype-scriptaculous%[email protected]> >>> . >>> For more options, visit this group at >>> http://groups.google.com/group/prototype-scriptaculous?hl=en. >>> >>> -- >>> You received this message because you are subscribed to the Google Groups >>> "Prototype & script.aculo.us" group. >>> To post to this group, send email to >>> [email protected]. >>> To unsubscribe from this group, send email to >>> [email protected]<prototype-scriptaculous%[email protected]> >>> . >>> For more options, visit this group at >>> http://groups.google.com/group/prototype-scriptaculous?hl=en. >>> >>> >>> >>> -- >>> You received this message because you are subscribed to the Google Groups >>> "Prototype & script.aculo.us" group. >>> To post to this group, send email to >>> [email protected]. >>> To unsubscribe from this group, send email to >>> [email protected]<prototype-scriptaculous%[email protected]> >>> . >>> For more options, visit this group at >>> http://groups.google.com/group/prototype-scriptaculous?hl=en. >>> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Prototype & script.aculo.us" group. >> To post to this group, send email to >> [email protected]. >> To unsubscribe from this group, send email to >> [email protected]<prototype-scriptaculous%[email protected]> >> . >> For more options, visit this group at >> http://groups.google.com/group/prototype-scriptaculous?hl=en. >> >> > -- > You received this message because you are subscribed to the Google Groups > "Prototype & script.aculo.us" group. > To post to this group, send email to > [email protected]. > To unsubscribe from this group, send email to > [email protected]<prototype-scriptaculous%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/prototype-scriptaculous?hl=en. > -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
