Inline jQuery; select relative to script tag

Question

This is a bit goofy, as its counter-intuitive to liberating markup of Javascript, however I'm going to ask anyways.

Given this snippet:

<p>Hello</p>
<script type="text/javascript">
    $(document).ready(function(){
        $('relative-selector').next('p').hide();
    });
</script>
<p>World</p>

This snippet would target the <script> tag itself with this "relative selector", and .next('p').hide() would result in <p>World</p> being hidden.

Does there exist a "relative selector", or means of targeting the script tag a given snippet resides within?

The answer I'm looking for (given such one exists) would not require the use of an id attribute, or any such identifying attributes; it would work with an arbitrary number of <script> tags in a given document, regardless of position in the DOM tree.

I've seen some strange implementations that don't use $(document).ready(), instead relying on the fact that the remaining markup has not loaded, using $('script:last') or some such concoction. This isn't what I'm after though; I'd like to .bind() some handlers to elements relative to the binding script snippet (typically after, which is why the unloaded markup trick won't work)

$(this) simply targets the document object due to the ready handler. $(this) outside of load-deferred handlers targets window.

I've already nearly accepted that this probably isn't possible, however I'm sure if any solution exists, its floating about in the minds of fellow SO users.

possible duplicate of [Can you select the script element that included the JavaScript?](http://stackoverflow.com/questions/6779515/can-you-select-the-script-element-that-included-the-javascript) — zzzzBov, Sep 22 '11 at 03:58

Antoine Aubry · Accepted Answer · 2011-09-21T07:53:23.710

7

You can probably insert a temporary element using

document.write("<div id='temp' style='display: none'></div>")

and then using that to find the next element using jQuery. Afterwards you can remove the element.

$("#temp").next("p").doSomething();
$("#temp").remove();

Another option would be to build on the technique you suggested of the partialy loaded document to retrieve a reference to the tag, but to use it only on load:

(function() {
    var thisScript = $('script:last');
    $(function() {
         thisSctipt.next("p").doSomething();
    });
})();

edited Sep 21 '11 at 07:53

answered Sep 21 '11 at 07:46

Antoine Aubry

12,203
10
45
74

I think your first option is the way to go, I'd use the `document.write` outside of the `$(document).ready` call, so that it definitely writes the `temp` div in the right place. – chris5marsh Sep 21 '11 at 08:10
Thanks @Antoine - The second version is great; I've been testing with it, however chris5marsh's comment begs the question; are there circumstances under which it would be unreliable? I like the second version, since it operates without DOM manipulation to establish position, however I will opt in favor of the first if it is more reliable. Are scripts executed during progressive page load "blocking", or is there a chance that an immediate next-sibling ` – Dan Lugg Sep 21 '11 at 18:56
To partly answer my last comment, one of the circumstances under which the `'script:last'` version would fail is using Ajax. If an HTML snippet with such inline-relative jQuery were loaded (*and executed*) it would obviously hit the `:last` on the existing page (*likely not the last in the snippet content*) I'm thinking I'll go with your first version now, however I'm still certainly open to other suggestions or cautions you think I should be aware of. Thanks @Antoine! – Dan Lugg Sep 22 '11 at 03:14
Damn, it also appears that the `document.write()` method fails with Ajax; did not realize that (*it overwrites the entire existing page when the inline script executes from the loaded snippet*) This is proving tedious! – Dan Lugg Sep 22 '11 at 03:33
1

It is a nice suggestion, but sadly doesn't work for XHTML documents: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite – Aristoteles Nov 11 '11 at 10:00

score 0 · Answer 2 · answered Sep 21 '11 at 07:45

I do not think you can make a relative selector for the containing script tag.

There's a jQuery selector for script tags: script[type*=javascript], you could try adding a class or id attribute to the

element(s) you want to hide and then write your jQuery selector to select all

elements right after a script tag and check for each of those

elements if they contain the class indicating they should be hidden.

It's been a while since I've worked with jQuery so you'll have to excuse me, but I cannot provide you with a code sample at this time.

Inline jQuery; select relative to script tag

2 Answers2

Linked