Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > how to use JS to get an outer div id?

Reply
Thread Tools

how to use JS to get an outer div id?

 
 
laredotornado@zipmail.com
Guest
Posts: n/a
 
      01-31-2007
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

 
Reply With Quote
 
 
 
 
-Lost
Guest
Posts: n/a
 
      01-31-2007
<(E-Mail Removed)> wrote in message
news:(E-Mail Removed) ups.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="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


 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      01-31-2007
-Lost said the following on 1/30/2007 7:22 PM:
> <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed) ups.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="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>
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-31-2007
On Jan 31, 10:22 am, "-Lost" <(E-Mail Removed)>
wrote:
> <(E-Mail Removed)> wrote in message
>
> news:(E-Mail Removed) ups.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="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>



--
Rob

 
Reply With Quote
 
GAMEchief
Guest
Posts: n/a
 
      01-31-2007
On Jan 30, 6:10 pm, "(E-Mail Removed)"
<(E-Mail Removed)> wrote:
> 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.

 
Reply With Quote
 
-Lost
Guest
Posts: n/a
 
      01-31-2007
"Randy Webb" <(E-Mail Removed)> wrote in message
news(E-Mail Removed)...
> -Lost said the following on 1/30/2007 7:22 PM:
>> <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed) ups.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="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


 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      01-31-2007
-Lost said the following on 1/31/2007 1:17 AM:
> "Randy Webb" <(E-Mail Removed)> wrote in message
> news(E-Mail Removed)...
>> -Lost said the following on 1/30/2007 7:22 PM:
>>> <(E-Mail Removed)> wrote in message
>>> news:(E-Mail Removed) ups.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="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.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
-Lost
Guest
Posts: n/a
 
      01-31-2007
"Randy Webb" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> -Lost said the following on 1/31/2007 1:17 AM:
>> "Randy Webb" <(E-Mail Removed)> wrote in message
>> news(E-Mail Removed)...
>>> -Lost said the following on 1/30/2007 7:22 PM:
>>>> <(E-Mail Removed)> wrote in message
>>>> news:(E-Mail Removed) ups.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="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.

>> 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


 
Reply With Quote
 
Randy Webb
Guest
Posts: n/a
 
      01-31-2007
-Lost said the following on 1/31/2007 1:25 PM:
> "Randy Webb" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...


<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.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
-Lost
Guest
Posts: n/a
 
      02-01-2007
"Randy Webb" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> -Lost said the following on 1/31/2007 1:25 PM:
>> "Randy Webb" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...

>
> <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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
FF 3.6 vs IE7 -- clicking on inner DIV causing outer DIV onBlur tofire in FF not in IE Tom Y Javascript 1 07-12-2011 08:36 AM
style of inner div is not overriding that of outer div Mc Lauren Series HTML 3 02-13-2010 01:36 AM
IE 7.0 outer div height issue SM ASP .Net 2 11-26-2009 03:23 PM
Can you format table contents from an outer DIV tag? bradsalmon HTML 6 10-13-2006 09:29 PM



Advertisments