Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select the element right before the script tag

How would you select the first input in the code below without editing the DOM (using jQuery if needed)?

<input type="text"/> <!-- The element I want to select -->
<script>
    // Select the input above
</script>
<input type="text"/>

Please note there is an unknown number of inputs and script tags before and after this code sample, thus solutions like $("input:eq(1)") won't work.

The tricky part is to select the input placed right before the script tag from which the current JavaScript is being executed.

No need to ask me why I want to do this either, that's purely for the beauty of it, I want to do it without having to add random ids to my inputs if that's possible.

Edit
Here's why most of the answers won't work: http://jsfiddle.net/2WqfP/

like image 327
user1728278 Avatar asked Jan 21 '13 17:01

user1728278


People also ask

Which tag is used for script?

<script>: The Script element. The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.

How do I use before in JavaScript?

before() The Element. before() method inserts a set of Node or string objects in the children list of this Element 's parent, just before this Element . String objects are inserted as equivalent Text nodes.

What is script tag in HTML?

The <script> tag is used to embed a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.


2 Answers

Scripts are always run as they are loaded, so the <script> tag that's running will always be the last one on the page. With pure JS you can get it like this:

var scripts = document.getElementsByTagName('script'),
    currentScript = scripts[scripts.length - 1];

Edit: I got this wrong before. To get the input at this point, you want to get the preceding sibling, so you'd use previousSibling. Also, see thesystem's comment below about text nodes and a potential solution.

var scripts = document.getElementsByTagName('script'),
    currentScript = scripts[scripts.length - 1],
    input = currentScript.previousSibling;

You could also use jQuery:

var currentScript = $('script').last();

Once you have the script, you can get the preceding input easily:

var input = $('script').last().prev();
like image 113
newtron Avatar answered Oct 05 '22 09:10

newtron


Here's a jsfiddle showing my solution.

$("input:last").val("test");

This works because when the script is reached, the input immediately preceding it is the last input to be created - the following <input>'s have not yet been added to the DOM. If you ran the code after page load (that is, in an onload even handler), this wouldn't work.

It's worth noting that I would personally prefer ids, so that you don't rely on inline JavaScript (which is usually a bad idea).

like image 37
George Avatar answered Oct 05 '22 11:10

George