CODEWITHSUNDEEP
jquery
thkang
thkang

Reputation: 11543

how to select parent of <script> element

<div id="scriptparent">
    <script type="text/javascript">
         $( /* select above <div> from <script> ... without id and div property */ )
    </script>
</div>

from the code I have a <script> block inside <div> block. I'd like to select <div> from <script> without id, class, name selectors. How can I achieve this?

Upvotes: 25

Views: 13231

Answers (5)

faster
faster

Reputation: 151

None of the above solutions have worked for me, my script in inserted by angular as a part of CMS and in repeatable block.

"some_div" class name should be sort of unique for this sort of insertions.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="some_div" style="display: none;"></div>
<script type="text/javascript">
	setTimeout(function(){
		var local_id = 'Div_' + Math.round(Math.random() * 100000);
		$('.some_div').not( ".processed" ).attr({id: local_id})
		var alert_div = $('#' + local_id);
		
		alert_div.show().html('nearby div')
		alert_div.addClass('processed');
	}, 20)
</script>

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074989

If the code is as you've shown it and so it's running right away, as the DOM is being built, you may be able to do something with document.body.lastChild.

So the short answer to you question is:

var div = $(document.body.lastChild).closest('div');

I'm being a bit paranoid there, in my tests (on Chrome), document.body.lastChild is the div, but by using closest I deal with the possibility it could be script on some engines.

The long answer is an example: Live Copy | Source

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Last Element ID</title>
  <script>
    function setUpParentDiv() {
      var div = $(document.body.lastChild).closest('div');
      switch (div.attr("id")) {
        case "div1":
          div.css("color", "blue");
          break;
        case "div2":
          div.css("color", "green");
          break;
      }
    }
  </script>
</head>
<body>
  <div id="div1">
    I'm div1
    <script>
      setUpParentDiv();
    </script>
  </div>
  <div id="div2">
    I'm div2
    <script>
      setUpParentDiv();
    </script>
  </div>
</body>
</html>

Upvotes: 7

Ram Khumana
Ram Khumana

Reputation: 842

 <div id="scriptparent">
        <script type="text/javascript">
            var scriptTag = document.scripts[document.scripts.length - 1];
            var parentTag = scriptTag.parentNode;
            alert(parentTag.id);
        </script>
    </div>

Upvotes: 14

dfsq
dfsq

Reputation: 193291

If your script tags are not defered (all loaded synchronously) then this will work:

<div id="scriptparent">
    <script type="text/javascript">
        var thisScript = document.scripts[document.scripts.length - 1],
            parent = thisScript.parentNode; // points to div#scriptparent
    </script>
</div>

Upvotes: 11

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

The script tag supports all HTML global attributes, which includes id. Add an id to your script tag, which an be used as a hook to select the parent.

<div id="scriptparent">
<script id="myScript" type="text/javascript">
   alert($("#myScript").parent().attr("id"));
</script>

Working Example: http://jsfiddle.net/5fTyK/

Upvotes: 10

Related Questions