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="background-color:#e0e0e0; height:15px;"><td
align="right"><a href="javascript: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]

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="background-color:#e0e0e0; height:15px;"><td
align="right"><a href="javascript: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.getElementsByTagName('div')[0]

That should do it.

-Lost

 

[Randy Webb]

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

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="background-color:#e0e0e0; height:15px;"><td
align="right"><a href="javascript: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.getElementsByTagName('div')[0]

That should do it.

It won't. Consider:

<div id="outerDivYouGet"></div>
<div id="outerDivWanted">
<div id="innerDiv">Do you still think that
document.getElementsByTagName('div')[0]
still refers to the outer most div element
of this element? Hint: It doesn't.
</div>

 

[RobG]

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="background-color:#e0e0e0; height:15px;"><td
align="right"><a href="javascript: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.getElementsByTagName('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.toLowerCase() == '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):alert('no id');
} else {
alert('no outer div');
}
">Show outer-most DIV id</button>
</div>
</div>

 

[GAMEchief]

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="background-color:#e0e0e0; height:15px;"><td
align="right"><a href="javascript: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]

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

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="background-color:#e0e0e0; height:15px;"><td
align="right"><a href="javascript: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.getElementsByTagName('div')[0]

That should do it.

It won't. Consider:

<div id="outerDivYouGet"></div>
<div id="outerDivWanted">
<div id="innerDiv">Do you still think that
document.getElementsByTagName('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:

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

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="background-color:#e0e0e0; height:15px;"><td
align="right"><a href="javascript: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.getElementsByTagName('div')[0]

That should do it.

It won't. Consider:

<div id="outerDivYouGet"></div>
<div id="outerDivWanted">
<div id="innerDiv">Do you still think that
document.getElementsByTagName('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.

 

[-Lost]

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

-Lost said the following on 1/30/2007 7:22 PM:
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="background-color:#e0e0e0; height:15px;"><td
align="right"><a href="javascript: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.getElementsByTagName('div')[0]

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

<div id="outerDivYouGet"></div>
<div id="outerDivWanted">
<div id="innerDiv">Do you still think that
document.getElementsByTagName('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.

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:

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.

 

[-Lost]

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

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.

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.

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

 

[Randy Webb]

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

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

Nothing in Usenet is worth getting too worked up over. By tomorrow there
will be another 100 threads to distract you from what happened yesterday

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.

After almost 10 years here the side of my head is so flat that it
doesn't jar me too much anymore, I kinda go <thud> on the wall now.