how to use JS to get an outer div id?

Discussion in 'Javascript' started by laredotornado@zipmail.com, Jan 31, 2007.

  1. Guest

    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
    , Jan 31, 2007
    #1
    1. Advertising

  2. -Lost Guest

    <> wrote in message
    news:...
    > 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
    -Lost, Jan 31, 2007
    #2
    1. Advertising

  3. Randy Webb Guest

    -Lost said the following on 1/30/2007 7:22 PM:
    > <> wrote in message
    > news:...
    >> 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/
    Randy Webb, Jan 31, 2007
    #3
  4. RobG Guest

    On Jan 31, 10:22 am, "-Lost" <>
    wrote:
    > <> wrote in message
    >
    > news:...
    >
    >
    >
    > > 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
    RobG, Jan 31, 2007
    #4
  5. GAMEchief Guest

    On Jan 30, 6:10 pm, ""
    <> 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.
    GAMEchief, Jan 31, 2007
    #5
  6. -Lost Guest

    "Randy Webb" <> wrote in message
    news:p...
    > -Lost said the following on 1/30/2007 7:22 PM:
    >> <> wrote in message
    >> news:...
    >>> 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
    -Lost, Jan 31, 2007
    #6
  7. Randy Webb Guest

    -Lost said the following on 1/31/2007 1:17 AM:
    > "Randy Webb" <> wrote in message
    > news:p...
    >> -Lost said the following on 1/30/2007 7:22 PM:
    >>> <> wrote in message
    >>> news:...
    >>>> 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/
    Randy Webb, Jan 31, 2007
    #7
  8. -Lost Guest

    "Randy Webb" <> wrote in message
    news:...
    > -Lost said the following on 1/31/2007 1:17 AM:
    >> "Randy Webb" <> wrote in message
    >> news:p...
    >>> -Lost said the following on 1/30/2007 7:22 PM:
    >>>> <> wrote in message
    >>>> news:...
    >>>>> 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
    -Lost, Jan 31, 2007
    #8
  9. Randy Webb Guest

    -Lost said the following on 1/31/2007 1:25 PM:
    > "Randy Webb" <> wrote in message
    > news:...


    <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/
    Randy Webb, Jan 31, 2007
    #9
  10. -Lost Guest

    "Randy Webb" <> wrote in message
    news:...
    > -Lost said the following on 1/31/2007 1:25 PM:
    >> "Randy Webb" <> wrote in message
    >> news:...

    >
    > <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
    -Lost, Feb 1, 2007
    #10
  11. Randy Webb Guest

    -Lost said the following on 1/31/2007 9:28 PM:
    > "Randy Webb" <> wrote in message
    > news:...
    >> -Lost said the following on 1/31/2007 1:25 PM:
    >>> "Randy Webb" <> wrote in message
    >>> news:...

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


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

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


    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.

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Feb 1, 2007
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bradsalmon
    Replies:
    6
    Views:
    621
    richard
    Oct 13, 2006
  2. SM
    Replies:
    2
    Views:
    573
    Andrew Morton
    Nov 26, 2009
  3. Mc Lauren Series
    Replies:
    3
    Views:
    1,280
    Neredbojias
    Feb 13, 2010
  4. SM

    IE 7.0 - Outer div height issue

    SM, Nov 25, 2009, in forum: ASP General
    Replies:
    0
    Views:
    675
  5. Tom Y
    Replies:
    1
    Views:
    224
    Elegie
    Jul 12, 2011
Loading...

Share This Page