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].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
