how to use JS to get an outer div id?

[laredotornado]

Hi,

I have a block of HTML of this form:

<div id="outer0" class="outerDiv ">
<div class="innerDiv ">
<table height="100%" id="table0">
<tr style="backgrou nd-color:#e0e0e0; height:15px;">< td
align="right">< a href="javascrip t:closeMe('/* Javascript goes here
*/');">Click Me</a></td></tr>
<!-- There may be more table rows -->
</table>
</div>
</div>

In the place where you see "/* Javascript goes here */", I would like
to put an expression that evaluates to the id of the outer most DIV,
so in this case, it would evaluate to "outer0". Does anyone know a
cross-browser JS expression that will do this?

Thanks, - Dave

[-Lost]

<la***********@ zipmail.comwrot e in message
news:11******** *************@s 48g2000cws.goog legroups.com...

Hi,

I have a block of HTML of this form:

<div id="outer0" class="outerDiv ">
<div class="innerDiv ">
<table height="100%" id="table0">
<tr style="backgrou nd-color:#e0e0e0; height:15px;">< td
align="right">< a href="javascrip t:closeMe('/* Javascript goes here
*/');">Click Me</a></td></tr>
<!-- There may be more table rows -->
</table>
</div>
</div>

In the place where you see "/* Javascript goes here */", I would like
to put an expression that evaluates to the id of the outer most DIV,
so in this case, it would evaluate to "outer0". Does anyone know a
cross-browser JS expression that will do this?

document.getEle mentsByTagName( 'div')[0]

That should do it.

-Lost

[Randy Webb]

-Lost said the following on 1/30/2007 7:22 PM:

<la***********@ zipmail.comwrot e in message
news:11******** *************@s 48g2000cws.goog legroups.com...

>Hi,

I have a block of HTML of this form:

<div id="outer0" class="outerDiv ">
<div class="innerDiv ">
<table height="100%" id="table0">
<tr style="backgrou nd-color:#e0e0e0; height:15px;">< td
align="right"> <a href="javascrip t:closeMe('/* Javascript goes here
*/');">Click Me</a></td></tr>
<!-- There may be more table rows -->
</table>
</div>
</div>

In the place where you see "/* Javascript goes here */", I would like
to put an expression that evaluates to the id of the outer most DIV,
so in this case, it would evaluate to "outer0". Does anyone know a
cross-browser JS expression that will do this?

document.getEle mentsByTagName( 'div')[0]

That should do it.

It won't. Consider:

<div id="outerDivYou Get"></div>
<div id="outerDivWan ted">
<div id="innerDiv">D o you still think that
document.getEle mentsByTagName( 'div')[0]
still refers to the outer most div element
of this element? Hint: It doesn't.
</div>
--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[RobG]

On Jan 31, 10:22 am, "-Lost" <spam_ninjaREMO V...@REMOVEMEco mcast.net>
wrote:

<laredotorn...@ zipmail.comwrot e in message

news:11******** *************@s 48g2000cws.goog legroups.com...

Hi,

I have a block of HTML of this form:

<div id="outer0" class="outerDiv ">
<div class="innerDiv ">
<table height="100%" id="table0">
<tr style="backgrou nd-color:#e0e0e0; height:15px;">< td
align="right">< a href="javascrip t:closeMe('/* Javascript goes here
*/');">Click Me</a></td></tr>
<!-- There may be more table rows -->
</table>
</div>
</div>

In the place where you see "/* Javascript goes here */", I would like
to put an expression that evaluates to the id of the outer most DIV,
so in this case, it would evaluate to "outer0". Does anyone know a
cross-browser JS expression that will do this?

document.getEle mentsByTagName( 'div')[0]

That should do it.

Only if the outermost div is the first in the document. Consider:

<div... </div>
<div>
<div>What is my outermost div?</div>
</div>
The following function climbs up the DOM and returns a reference to
the last div encountered. If there is no enclosing div, it returns
undefined.

function getOutermostDiv (el) {
var outermostDiv;
while (el.parentNode && (el = el.parentNode)) {
if (el.tagName && el.tagName.toLo werCase() == 'div'){
outermostDiv = el;
}
}
return outermostDiv;
}
And a test:

<div id="blah">
<div id="blah00">
<button onclick="
var x = getOutermostDiv (this);
if (x) {
(x.id)? alert(x.id):ale rt('no id');
} else {
alert('no outer div');
}
">Show outer-most DIV id</button>
</div>
</div>

--
Rob

[GAMEchief]

On Jan 30, 6:10 pm, "laredotorn...@ zipmail.com"
<laredotorn...@ zipmail.comwrot e:

Hi,

I have a block of HTML of this form:

<div id="outer0" class="outerDiv ">
<div class="innerDiv ">
<table height="100%" id="table0">
<tr style="backgrou nd-color:#e0e0e0; height:15px;">< td
align="right">< a href="javascrip t:closeMe('/* Javascript goes here
*/');">Click Me</a></td></tr>
<!-- There may be more table rows -->
</table>
</div>
</div>

In the place where you see "/* Javascript goes here */", I would like
to put an expression that evaluates to the id of the outer most DIV,
so in this case, it would evaluate to "outer0". Does anyone know a
cross-browser JS expression that will do this?

Thanks, - Dave

Try parentNode and a while loop.

[-Lost]

"Randy Webb" <Hi************ @aol.comwrote in message
news:Pt******** ************@te lcove.net...

-Lost said the following on 1/30/2007 7:22 PM:

><la*********** @zipmail.comwro te in message
news:11******* **************@ s48g2000cws.goo glegroups.com.. .

>>Hi,

I have a block of HTML of this form:

<div id="outer0" class="outerDiv ">
<div class="innerDiv ">
<table height="100%" id="table0">
<tr style="backgrou nd-color:#e0e0e0; height:15px;">< td
align="right" ><a href="javascrip t:closeMe('/* Javascript goes here
*/');">Click Me</a></td></tr>
<!-- There may be more table rows -->
</table>
</div>
</div>

In the place where you see "/* Javascript goes here */", I would like
to put an expression that evaluates to the id of the outer most DIV,
so in this case, it would evaluate to "outer0". Does anyone know a
cross-browser JS expression that will do this?

document.getEl ementsByTagName ('div')[0]

That should do it.

It won't. Consider:

<div id="outerDivYou Get"></div>
<div id="outerDivWan ted">
<div id="innerDiv">D o you still think that
document.getEle mentsByTagName( 'div')[0]
still refers to the outer most div element
of this element? Hint: It doesn't.
</div>

But I was responding to the original poster's *original* markup. In *that* sense, I was
correct, right?

I see RobG provided a function that would always reach the outermost DIV. I guess I
should have thought of something like that (not sure that I could have to be honest). But
based on what the original post was, I thought my answer sufficed. Not if the original
poster's markup was changed.

Am I way off base?

Thanks.

-Lost

[Randy Webb]

-Lost said the following on 1/31/2007 1:17 AM:

"Randy Webb" <Hi************ @aol.comwrote in message
news:Pt******** ************@te lcove.net...

>-Lost said the following on 1/30/2007 7:22 PM:

>><la********** *@zipmail.comwr ote in message
news:11****** *************** @s48g2000cws.go oglegroups.com. ..
Hi,

I have a block of HTML of this form:

<div id="outer0" class="outerDiv ">
<div class="innerDiv ">
<table height="100%" id="table0">
<tr style="backgrou nd-color:#e0e0e0; height:15px;">< td
align="right "><a href="javascrip t:closeMe('/* Javascript goes here
*/');">Click Me</a></td></tr>
<!-- There may be more table rows -->
</table>
</div>
</div>

In the place where you see "/* Javascript goes here */", I would like
to put an expression that evaluates to the id of the outer most DIV,
so in this case, it would evaluate to "outer0". Does anyone know a
cross-browser JS expression that will do this?
document.getE lementsByTagNam e('div')[0]

That should do it.

It won't. Consider:

<div id="outerDivYou Get"></div>
<div id="outerDivWan ted">
<div id="innerDiv">D o you still think that
document.getEl ementsByTagName ('div')[0]
still refers to the outer most div element
of this element? Hint: It doesn't.
</div>

But I was responding to the original poster's *original* markup. In *that* sense, I was
correct, right?

Given the HTML markup, yes, your code gives the containing div. But only
if that is the markup with no other code in the page. Life isn't always
that simple though :-)

I see RobG provided a function that would always reach the outermost DIV. I guess I
should have thought of something like that (not sure that I could have to be honest). But
based on what the original post was, I thought my answer sufficed. Not if the original
poster's markup was changed.

Am I way off base?

Nah, after 10 years or so around here you start QC'ing any posted code
to see if it can be broken. If it can't, then it is a pretty good bet
that you have solid code that can be reused elsewhere instead of trying
to come up with a one-off solution. One-off solutions have a place though.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[-Lost]

"Randy Webb" <Hi************ @aol.comwrote in message
news:Nc******** ************@te lcove.net...

-Lost said the following on 1/31/2007 1:17 AM:

>"Randy Webb" <Hi************ @aol.comwrote in message
news:Pt******* *************@t elcove.net...

>>-Lost said the following on 1/30/2007 7:22 PM:
<la********* **@zipmail.comw rote in message
news:11***** *************** *@s48g2000cws.g ooglegroups.com ...
Hi,
>
I have a block of HTML of this form:
>
<div id="outer0" class="outerDiv ">
<div class="innerDiv ">
<table height="100%" id="table0">
<tr style="backgrou nd-color:#e0e0e0; height:15px;">< td
align="righ t"><a href="javascrip t:closeMe('/* Javascript goes here
*/');">Click Me</a></td></tr>
<!-- There may be more table rows -->
</table>
</div>
</div>
>
In the place where you see "/* Javascript goes here */", I would like
to put an expression that evaluates to the id of the outer most DIV,
so in this case, it would evaluate to "outer0". Does anyone know a
cross-browser JS expression that will do this?
document.get ElementsByTagNa me('div')[0]

That should do it.
It won't. Consider:

<div id="outerDivYou Get"></div>
<div id="outerDivWan ted">
<div id="innerDiv">D o you still think that
document.getE lementsByTagNam e('div')[0]
still refers to the outer most div element
of this element? Hint: It doesn't.
</div>

But I was responding to the original poster's *original* markup. In *that* sense, I
was correct, right?

Given the HTML markup, yes, your code gives the containing div. But only if that is the
markup with no other code in the page. Life isn't always that simple though :-)

Too true... too... true.

>I see RobG provided a function that would always reach the outermost DIV. I guess I
should have thought of something like that (not sure that I could have to be honest).
But based on what the original post was, I thought my answer sufficed. Not if the
original poster's markup was changed.

Am I way off base?

Nah, after 10 years or so around here you start QC'ing any posted code to see if it can
be broken. If it can't, then it is a pretty good bet that you have solid code that can
be reused elsewhere instead of trying to come up with a one-off solution. One-off
solutions have a place though.

Definitely makes sense! I think maybe I will refrain from responding as much unless I
have a reusable (module) piece of code.

I remember reading once (I think on an Algebra newsgroup) that "to learn" you should "post
often, and try to answer as much as you can." That just does not hold true for this
group. I feel silly every time I provide an ad-hoc solution.

I even sit here thinking, "Man, I think this is a decent solution." When I see that it is
not I just smack myself on the forehead wondering "Why did I not think of that?"

OK, enough boo-hoo-ing. : )

-Lost

[Randy Webb]

-Lost said the following on 1/31/2007 1:25 PM:

"Randy Webb" <Hi************ @aol.comwrote in message
news:Nc******** ************@te lcove.net...

<snip>

>Nah, after 10 years or so around here you start QC'ing any posted code to see if it can
be broken. If it can't, then it is a pretty good bet that you have solid code that can
be reused elsewhere instead of trying to come up with a one-off solution. One-off
solutions have a place though.

Definitely makes sense! I think maybe I will refrain from responding as much unless I
have a reusable (module) piece of code.

Then you won't learn. You can only learn just so much before you have to
start posting code or you won't ever see what is wrong with your approach.

I remember reading once (I think on an Algebra newsgroup) that "to learn" you should "post
often, and try to answer as much as you can." That just does not hold true for this
group. I feel silly every time I provide an ad-hoc solution.

Don't. We all did. I did, Richard did, RobG did, we all did. Post a
potential solution. Just be prepared to have your head slammed into a
wall if you didn't think it out.

I even sit here thinking, "Man, I think this is a decent solution." When I see that it is
not I just smack myself on the forehead wondering "Why did I not think of that?"

That's when you make a mental note to remember it next time. It's the
surest way to learning is trying. 'Tis better to try and fail than to
have never tried.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[-Lost]

"Randy Webb" <Hi************ @aol.comwrote in message
news:uM******** ************@te lcove.net...

-Lost said the following on 1/31/2007 1:25 PM:

>"Randy Webb" <Hi************ @aol.comwrote in message
news:Nc******* *************@t elcove.net...

<snip>

>>Nah, after 10 years or so around here you start QC'ing any posted code to see if it
can be broken. If it can't, then it is a pretty good bet that you have solid code that
can be reused elsewhere instead of trying to come up with a one-off solution. One-off
solutions have a place though.

Definitely makes sense! I think maybe I will refrain from responding as much unless I
have a reusable (module) piece of code.

Then you won't learn. You can only learn just so much before you have to start posting
code or you won't ever see what is wrong with your approach.

OK. I thought perhaps I might be getting on the nerves of the regulars (including
yourself). Thanks for the advice.

>I remember reading once (I think on an Algebra newsgroup) that "to learn" you should
"post often, and try to answer as much as you can." That just does not hold true for
this group. I feel silly every time I provide an ad-hoc solution.

Don't. We all did. I did, Richard did, RobG did, we all did. Post a potential solution.
Just be prepared to have your head slammed into a wall if you didn't think it out.

Definitely. I can handle criticism. I have a neurological disorder though, so I hope you
guys will not slam it too hard against the wall. I need all the thinking power I have
left.

>I even sit here thinking, "Man, I think this is a decent solution." When I see that it
is not I just smack myself on the forehead wondering "Why did I not think of that?"

That's when you make a mental note to remember it next time. It's the surest way to
learning is trying. 'Tis better to try and fail than to have never tried.

Oh yeah, definitely. I have so many posts marked "watch" in my newsreader it is pathetic.
I also take the code posted and insert it in a working HTML document with notes as to who
wrote it. Like I did with this thread and RobG's code.

Be well.

-Lost