javascript - If i have a script inside a div, how do i get the id of that particular div? <br> - Stack Overflow

admin管理员组

文章数量:1424948

If i have a script inside a div, how do i get the id of that particular div?
(so that i can do like below, but with varying div id's):

<div id="chart_div1" class ="googlepie">
<script type="text/javascript">
   drawChart('chart_div1');
</script>
</div>

[edit]:
I have two html views where when one view's button is clicked the second view is shown.
some javascript reconstructs html to do this, and I only wanted the charts to be shown on the second view, so i have a click event handling this.
But strangely, i have only managed to load a particular chart in a particular div (of multiple repeated), like above, by putting the script that calls drawChart() in the div itself. For this reason i couldn't relocate the script into a more fortable position like some have suggested. Also, no matter what suggested methods to fetch the parents div 'ID' i tried, i kept getting an 'undefined container' error.

For example this didnt work for me:

<div class ="googlepie" id="chart_div1" style ="position:absolute; top: -8%; left:63%;">
<script type="text/javascript" class ="chartscript" id="bakegooglepie">
    // drawChart($('.chartscript').parent().attr('id'));  // this didnt work
    // drawChart($('#bakegooglepie').parent().attr('id'));  // neither did this

    // var parentElementID = $(document.body.lastChild).closest('div').id;
    // drawChart(parentElementID); // this didnt either

    drawChart('chart_div1');   // only this did
</script>

For this reason my (particular) solution is to construct the ids and call them specifically in drawChart instead of getting the id with javascript.
However, i have chosen the answer to the original question to be one that everyone else seems to work for and so should work for others.

Note: that as others have suggested in most situations you shouldn't need to get the parent ID like my question supposes.

If i have a script inside a div, how do i get the id of that particular div?
(so that i can do like below, but with varying div id's):

<div id="chart_div1" class ="googlepie">
<script type="text/javascript">
   drawChart('chart_div1');
</script>
</div>

[edit]:
I have two html views where when one view's button is clicked the second view is shown.
some javascript reconstructs html to do this, and I only wanted the charts to be shown on the second view, so i have a click event handling this.
But strangely, i have only managed to load a particular chart in a particular div (of multiple repeated), like above, by putting the script that calls drawChart() in the div itself. For this reason i couldn't relocate the script into a more fortable position like some have suggested. Also, no matter what suggested methods to fetch the parents div 'ID' i tried, i kept getting an 'undefined container' error.

For example this didnt work for me:

<div class ="googlepie" id="chart_div1" style ="position:absolute; top: -8%; left:63%;">
<script type="text/javascript" class ="chartscript" id="bakegooglepie">
    // drawChart($('.chartscript').parent().attr('id'));  // this didnt work
    // drawChart($('#bakegooglepie').parent().attr('id'));  // neither did this

    // var parentElementID = $(document.body.lastChild).closest('div').id;
    // drawChart(parentElementID); // this didnt either

    drawChart('chart_div1');   // only this did
</script>

For this reason my (particular) solution is to construct the ids and call them specifically in drawChart instead of getting the id with javascript.
However, i have chosen the answer to the original question to be one that everyone else seems to work for and so should work for others.

Note: that as others have suggested in most situations you shouldn't need to get the parent ID like my question supposes.

• javascript
• html

Share Improve this question Follow edited Aug 19, 2013 at 7:52 jsky asked Aug 19, 2013 at 2:29 jskyjsky 2,21766 gold badges3838 silver badges5454 bronze badges 2

• your string inside the function call is your id, use it as a parameter in your function block. – AdityaSaxena Commented Aug 19, 2013 at 2:32
• Also here stackoverflow./questions/14263717/… – Charaf JRA Commented Aug 19, 2013 at 2:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Try this (jQuery):

<div id="chart_div1" class ="googlepie" style ="position:absolute; top: -4%; left:68%;">
    <script type="text/javascript">
        var parentElement = $(document.body.lastChild).closest('div');
        drawChart(parentElement);
    </script>
</div>

Or this (basic JavaScript):

<div id="chart_div1" class ="googlepie" style ="position:absolute; top: -4%; left:68%;">
    <script type="text/javascript">
        var scriptTag = document.scripts[document.scripts.length - 1];
        var parentTag = scriptTag.parentNode;
        drawChart(parentTag.id);
    </script>
</div>

See here for more details: how to select parent of <script> element

Although this answers your question on how to achieve it, I believe this is not the best approach. You should place your JavaScript code at the end of the HTML document and use proper selectors to target your elements.

Cheers!

to get the id of the parent div using jQuery :

     $(this).parent().attr('id')

in your case :

    <div id="chart_div1" class ="googlepie" style ="position:absolute; top: -4%; left:68%;">
    <script type="text/javascript" id='example'>
      drawChart($('#example').parent().attr('id'));
    </script>
    </div>

It makes no difference where the script tag is on the page. you still have to use

document.getElementById('chart_div1');

You can't get elements relative to the <script> tag. Plus your ID's should be unique anyway so it shouldn't matter.

Well actually there are a few ways you can do this but it is not even slightly worth it. By doing it with document.body.lastChild it could break your whole script if the page loads even slightly different to normal.

本文标签：