2013-01-21 6 views
14

Come sceglieresti il ​​primo input nel codice qui sotto senza modificare il DOM (usando jQuery se necessario)?Seleziona l'elemento subito prima del tag dello script

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

Si prega di notare v'è un numero imprecisato di ingressi e tag di script prima e dopo questo esempio di codice, in tal modo soluzioni come $("input:eq(1)") non funzioneranno.

La parte difficile è selezionare lo input posizionato subito prima del tag script da cui viene eseguito il codice JavaScript corrente.

Non c'è bisogno di chiedermelo perché Anche io voglio fare questo, è puramente per la sua bellezza, voglio farlo senza dover aggiungere id casuali ai miei input se è possibile.

Modifica
Ecco perché la maggior parte delle risposte non funzionerà: http://jsfiddle.net/2WqfP/

risposta

0

Prova questa:

$("script").prev("input"); 
4

Ecco un jsfiddle showing my solution.

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

Questo funziona perché quando si raggiunge lo script, l'ingresso immediatamente precedente è l'ultimo ingresso da creare - le seguenti <input> 's non sono ancora state aggiunte al DOM. Se il codice è stato eseguito dopo il caricamento della pagina (ovvero, in un gestore pari a onload), ciò non funzionerebbe.

Vale la pena notare che preferirei personalmente id, in modo da non fare affidamento su JavaScript in linea (che di solito è una cattiva idea).

+0

Questo è un buon punto –

+0

Funzionerebbe nella maggior parte dei casi, ma sfortunatamente lo snippet di codice viene talvolta caricato in un lightbox, che viene inserito all'inizio del DOM. Grazie comunque! – user1728278

+0

Sulla tua ultima frase, eviterei personalmente sia gli id ​​che i JavaScript inline, ma tu conosci il drill, il codice legacy e tutto ... – user1728278

7

Gli script vengono sempre eseguiti mentre vengono caricati, quindi il tag <script> in esecuzione sarà sempre l'ultimo nella pagina. Con JS puro è possibile ottenere in questo modo:

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

Edit: ho ottenuto questo sbagliato prima. Per ottenere l'input a questo punto, si desidera ottenere il fratello precedente, quindi si usa previousSibling. Inoltre, vedi il commento del sistema qui sotto sui nodi di testo e una potenziale soluzione.

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

Si potrebbe anche usare jQuery:

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

Una volta che avete lo script, è possibile ottenere l'ingresso precedente facilmente:

var input = $('script').last().prev(); 
+1

Oggi ho imparato. +1 – BoltClock

+0

Sono effettivamente eseguiti mentre vengono caricati, ma quando vengono aggiunti all'inizio del DOM (in un lightbox che funziona in questo modo ad esempio), non possiamo essere sicuri che quello che viene eseguito sia il l'ultimo nel DOM. – user1728278

+2

@ user1728278: uno script aggiunto è una situazione molto diversa da quella nella domanda. Ma se è accodato, allora il codice che fa l'accodamento deve già sapere dove si trova 'input' (dato che lo' script' è posto relativamente a 'input'), e sarebbe quindi in grado di selezionarlo. –

0

soluzione DOM Native:

var all = document.getElementsByTagName("*"); 
var input = all[all.length - 2]; 

script sarà l'ultimo elemento della pagina quando viene eseguito, quindi input sarà il penultimo.

Problemi correlati