Uzyskiwanie bieżącego obiektu skryptu DOM w żądaniu ajaxowym (jquery)

Question

Mam komponent html, który zawiera trochę javascript.

Komponent plik jest w silniku szablonów, dzięki czemu może być stosowany

• w początkowej renderowania całej strony html
• jako samodzielna html świadczonych przez ajax żądanie

javascript powinny być stosowane do obiektu w szablonie, czyli:

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

Sprawdziłem this similar question, ale najlepsze odpowiedzi zdają się opierać na bieżącym skrypcie będącym ostatnim w zmiennej "skrypty", ponieważ kolejne nie są jeszcze załadowane. Jeśli dołączę html i js z zapytaniem o ajax, nie będzie tak.

Aby być w 100% czystym: pytanie dotyczy uzyskania poprzedniego obiektu BEZ odwołania do dowolnego konkretnego atrybutu: brak unikalnego identyfikatora dla tagu, brak losowego identyfikatora, ponieważ teoretycznie zawsze jest szansa, że ​​pojawi się dwa razy, brak unikatowego atrybut klasy, ponieważ dokładnie ten sam składnik może być wyświetlony w innej części dokumentu HTML.

Answer 1

Proste rozwiązanie obejmujące proces dwuetapowy:

1) Dowiedz się, który element tagu skrypt jest

2) znajdują poprzedni rodzeństwa tego elementu

w postaci kodu:

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

Czy to dobre programowanie internetowe? Nie. Powinieneś wiedzieć, które elementy powinny mieć zastosowane efekty w zależności od tego, co generujesz. Jeśli masz element div z identyfikatorem, ten identyfikator jest unikalny, a generator może powiedzieć, że jeśli wygeneruje ten element div, będzie musiał wygenerować js, który ustawi dla niego efekt jQuery.

Ale zignorujmy to; Czy to działa? Jak urok.

Answer 2

Jeśli możesz dać swojemu <script/> zablokować identyfikator, możesz łatwo wywołać prev(), aby uzyskać poprzedni element.

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

przykład na jsfiddle.

Answer 3

Będziesz musiał znaleźć sposób na odwołanie się do tagu skryptu bezpośrednio po "div" siatki. Jak stwierdził @Mark, najłatwiej to zrobić, nadając znacznikowi skryptu unikalny identyfikator. Jeśli jest to poza kontrolą, ale zrobić mieć kontrolę nad zawartością Script (niejawny przez fakt, że tworzymy go) można zrobić coś takiego:

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? Tak. Czy to działa? Również tak.

Answer 4

Oto coś, co działa w FF, Chrome i IE 8, niesprawdzone nigdzie indziej. Analizuje element przed ostatnim elementem na stronie (który jest analizowanym skryptem), przechowuje go lokalnie (z funkcją wywołania samowyzwalającego), aby mógł go użyć moduł obsługi ładunku.

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> 

To powiedziawszy. Nadal muszę wspomnieć, że ściśle łączysz zachowanie (JS) i HTML, umieszczając je w tym samym pliku, co jest sprzeczne z przepływem sieciowym ich rozdzielania. Nie wiem też, jak można by tego oczekiwać w przypadku żądania AJAX, ponieważ nie dodaje się go tylko do HTML podczas renderowania. W takim przypadku bardzo łatwo byłoby uzyskać odniesienie do właśnie wstawionego html.