Obtener el objeto DOM del script actual en una solicitud (aqx) ajax

Question

Tengo un componente html que incluye algunos javascript.

el componente es un archivo en un motor de plantillas, por lo que puede usarse

• en la prestación inicial de toda la página HTML
• como html autónomo prestados a través de una petición Ajax

el javascript se debe aplicar a un objeto en la plantilla, es decir:

<div class="grid" > 
    <div class="item" id="item_13"> 
     This is item 13 
    </div> 
    <div class="item" id="item_14"> 
     This is item 14 
    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(HOW_DO_I_GET_PREVIOUS_ELEMENT???).someEffect(params) 
    }) 
</script> 

He comprobado this similar question, pero las mejores respuestas parecen depender de que el guión actual sea el último en la variable 'guiones' ya que los siguientes aún no están cargados. Si anexo html y js con una solicitud de Ajax, no será el caso.

Para ser 100% claro: la pregunta es sobre obtener el objeto anterior SIN referencia a ningún atributo específico: no hay identificación única para la etiqueta, no hay identificación aleatoria ya que teóricamente siempre hay una posibilidad de que aparezca dos veces, no única atributo de clase, ya que exactamente el mismo componente podría mostrarse en otra parte del documento HTML.

Answer 1

solución simple que implica un proceso de dos pasos:

1) averiguar qué elemento de la etiqueta script es

2) encontrar el hermano anterior de ese elemento

en código:

<div id="grid"> 
    <!-- ... --> 
</div> 
<script type="text/javascript"> 
    var scripts = document.getElementsByTagName("script"); 
    var current = scripts[scripts.length-1]; 
    var previousElement = current.previousSibling; 
    // there may be whitespace text nodes that should be ignored 
    while(previousElement!==null && previousElement.nodeType===3) { 
     previousElement = previous.previousSibling; } 
    if(previousElement!==null) { 
     // previousElement is <div id="grid"> in this case 
     $(document).ready(function(){ 
      $(previousElement).someEffect(params); 
     }); 
    } 
</script> 

¿Es esta una buena programación web? No. Debes saber qué elementos deberían tener efectos aplicados en función de lo que estás generando. Si tienes un div con un id, ese id es único, y tu generador puede decir que si genera ese div, también tendrá que generar el js que establece el efecto jQuery para él.

Pero ignorémoslo; ¿Funciona? Como un encanto.

Answer 2

Si puede dar un identificador al bloque <script/>, puede llamar fácilmente al prev() para obtener el elemento anterior.

<script type="text/javascript" id="s2"> 
    $(document).ready(function(){ 
     $("#s2").prev().append("<h1>Prev Element</h2>"); 
    }) 
</script> 

Ejemplo en jsfiddle.

Answer 3

Deberá obtener una forma de referenciar la etiqueta del script inmediatamente después de la división "div". Como @Mark declaró, la forma más fácil de hacerlo es otorgando a la etiqueta del script una identificación única. Si esto está más allá de su control, pero que hacer tienen el control de los contenidos de script (implícita por el hecho de que lo está creando) se puede hacer algo como esto:

var UniqueVariableName; 
var scripts = document.getElementsByTagName('script'); 
var thisScript = null; 
for(var i = 0; i < scripts.length; i++){ 
    var script = $(scripts[i]); 
    if(script.text().indexOf('UniqueVariableName') >= 0){ 
     thisScript = script; 
     break; 
    } 
} 
if(thisScript){ 
    thisScript.prev().append("<h1>Prev Element</h2>"); 
} 

Hack? Sí. ¿Funciona? Además, sí.

Answer 4

Aquí hay algo que funciona en FF, Chrome e IE 8, sin probar en ningún otro lado. Mira el elemento antes del último elemento de la página (que es el script que se analiza), lo almacena localmente (con una función de auto llamada) para que el manejador de carga pueda usarlo.

http://jsfiddle.net/MtQ5R/2/

<div class="grid" > 
    <div class="item" id="item_13"> 
     This is item 13 
    </div> 
    <div class="item" id="item_14"> 
     This is item 14 
    </div> 
</div><script>(function(){ 
    var nodes = document.body.childNodes; 
    var prevSibling = nodes[nodes.length - 2]; 

    $(document).ready(function(){ 
     console.log(prevSibling); 
    }) 

})();</script> 

Una vez dicho esto. Debo mencionar que estás uniendo estrechamente el comportamiento (JS) y el HTML, colocándolos en el mismo archivo que va en contra del flujo de separación de la web. Además, no sé cómo es de esperar que funcione con una solicitud AJAX, ya que no solo la está agregando al HTML a medida que se procesa. En ese caso, sería muy fácil obtener una referencia al html que acaba de insertar.