Immer das aktuelle Skript-DOM-Objekt in ein (jquery) ajax-request

Ich habe eine html Komponente, die enthält einige javascript.

Die Komponente ist eine Datei in eine template-engine, so kann es verwendet werden

  • in der ersten Rendern der html-Seite
  • als stand-alone-html-wiedergegeben durch eine ajax-Anfrage

Javascript eingesetzt werden sollten, um ein Objekt in der Vorlage, d.h. :

<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>

Habe ich überprüft eine ähnliche Frage aber die besten Antworten scheinen, verlassen sich auf das aktuelle Skript wird der Letzte in der 'scripts' - variable, wie die nächsten sind noch nicht geladen. Wenn ich fügen Sie den html-und js mit einem ajax-request, wird es nicht der Fall sein.

100% klare : die Frage ist immer das Vorherige Objekt OHNE Bezug zu einem spezifischen Attribut : keine eindeutige id für den tag, ohne random-id, da es theoretisch immer eine chance, es wird zeigen, bis zweimal, keine eindeutige class-Attribut,als genau die gleiche Komponente angezeigt werden könnte, in einem anderen Teil des HTML-Dokuments.

  • Durch Vorherige element du meinst $("item_14")?. Wenn ja, wer erzeugt diese ids? Es klingt wie die gleiche Sache, die Sie erzeugt diese ids könnte leicht sagen, die JavaScript, um es einzufügen.
  • Durch Vorherige element meinte ich das raster div. Die Frage ist, über die Möglichkeit der Verweis auf das Vorherige element ohne Verweis auf eindeutige ids, wie jedes Objekt dargestellt werden können, in mehrere DOM-Objekte auf der aktuellen Seite. Ich in der Regel legen die numerische id-Verweise in das class-Attribut anstatt die id, für diese Angelegenheit. id wurde verwendet, hier zum Beispiel Willen
InformationsquelleAutor Lucas T | 2011-03-11
  1. 6

    Einfache Lösung mit einer zwei-Schritt-Prozess:

    1) finden Sie heraus, welches element dein script-tag ist

    2) finden Sie den vorigen Geschwisterknoten des Elements

    code:

    <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 = previousElement.previousSibling; }
    if(previousElement!==null) {
        //previousElement is <div id="grid"> in this case
        $(document).ready(function(){
            $(previousElement).someEffect(params);
        });
    }
</script>

    Ist dieses gute web-Programmierung? Nein. Sie sollten wissen, welche Elemente sollten Effekte auf Sie angewendet werden, basierend auf dem, was Sie erwirtschaften. Wenn Sie ein div mit einer id, diese id ist einzigartig, und Ihr generator kann Ihnen sagen, dass, wenn es ihm gelingt, die div wird es auch zum generieren der js gibt es die jQuery-Effekt für Sie.

    Aber wir ignorieren das; funktioniert es? Wie ein Charme.

    • die Linie previousElement = Vorherige.previousSibling; werden sollen previousElement = previousElement.previousSibling; ??
    InformationsquelleAutor Mike 'Pomax' Kamermans
  2. 3

    Wenn Sie können Ihren <script/> block eine Id, die Sie könnte leicht call prev() um das Vorherige element.

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

    Beispiel auf jsfiddle.

    InformationsquelleAutor Mark Coleman
  3. 3

    Werden Sie brauchen, um eine Möglichkeit zum verweisen auf das Skript-tag unmittelbar nach dem "grid" div. Wie @Mark angegeben, ist der einfachste Weg, dies zu tun ist, indem Sie die Skript-tag eine eindeutige id. Wenn dies außerhalb Ihrer Kontrolle, aber Sie tun die Kontrolle des script-Inhalte (implizit durch die Tatsache, dass Sie erstellen) können Sie etwas wie das hier tun:

    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? Ja. Funktioniert es? Auch, ja.

    InformationsquelleAutor jordancpaul
  4. 0

    Hier ist etwas, das funktioniert in FF, Chrome und IE 8, unversucht überall sonst. Er schaut auf das element, bevor das Letzte element auf der Seite (das ist das Skript geparsed), speichert es lokal (mit eine sich selbst aufrufende Funktion), so dass die load-handler verwenden können.

    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>

    Gesagt haben, dass. Ich habe noch zu erwähnen, dass Sie eng Kopplung das Verhalten (JS) und HTML, indem Sie in der gleichen Datei welche Art von geht gegen die web-Fluss Sie trennt. Auch, ich weiß nicht, wie Sie erwarten würden, diese arbeiten mit einem AJAX-request, da Sie nicht nur hinzufügen, um die HTML, wie es gerendert wird. In diesem Fall wäre es sehr einfach, um einen Verweis auf die html, die Sie gerade eingefügt aber.

    InformationsquelleAutor Juan Mendes
Schreibe einen Kommentar