Wow, thanks very much Alex!
Walter
On Feb 23, 2010, at 11:28 AM, Alex Wallace wrote:
Here's a slightly better version, as it crawls the tree itself
instead of grabbing and filtering all of the element's
nextSiblings(). Since it avoids the call to recursivelyCollect()
it's a bit faster (with 10 siblings after the requested node, it's
about 20% faster - when I upped it to about 40 elements after the
node, it ran well over 250% faster). If you have a lot of nodes to
filter for the accordion, I'd definitely use this version.
function fasterSameTagSiblings(element) {
element = $(element);
var results = [], node = element.nextSibling, tag;
while (node = node.nextSibling) {
if (node.nodeType === 1) {
tag = tag || node.tagName.toLowerCase();
if (node.tagName.toLowerCase() === tag)
results.push(node)
else
break;
}
}
return results;
}
Cheers,
Alex
Micro-optimization for sure, but it was bugging me. :)
function fasterSameTagSiblings(element) {
element = $(element);
var results = [], node = element.nextSibling, tag;
while (node = node.nextSibling) {
if (node.nodeType === 1) {
tag = tag || node.tagName.toLowerCase();
if (node.tagName.toLowerCase() === tag)
results.push(node)
else
break;
}
}
return results;
}
On Mon, Feb 22, 2010 at 8:24 PM, Walter Lee Davis
<[email protected]> wrote:
The heads and the paragraphs are all at the same level, and I don't
want all the paragraphs, just the ones between "this" head and the
next head. (It's for an accordion effect.) So while
up('div').select('p') would do exactly what you say, it would leave
me where I started.
Thanks,
Walter
On Feb 22, 2010, at 5:46 PM, Matt Foster wrote:
This is probably too obvious to be right but if you're simply
looking
for all of the paragraph tags at that level could you simply go up
to
the parent and select down from there?
On Feb 22, 12:57 pm, Paul Kim <[email protected]> wrote:
Hi Alex, thanks for the tip. I've modified the function based on
your tip
and your example function:
function consecutiveSameTagSiblings(element) {
var element = $(element);
var nextSiblings = element.nextSiblings();
var similarElements = [];
similarElements.push(element);
for (var i=0; i< nextSiblings.length; i++) {
if (element.tagName == nextSiblings[i].tagName) {
similarElements.push(nextSiblings[i]);
}
else {
break;
}
}
return similarElements;
}
On Mon, Feb 22, 2010 at 9:50 AM, Alex Wallace
<[email protected]>wrote:
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/
scriptaculou...
"></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-
scriptaculou s%[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-
scriptaculou s%[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-
scriptaculou s%[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
...
read more ยป
