Получение текущего объекта DOM скрипта в (jquery) ajax-запросе

Question

У меня есть HTML-компонент, который включает в себя некоторые JavaScript.

Компонент представляет собой файл в шаблонизаторе, поэтому его можно использовать

• при первоначальном отображении всей HTML-страницы
• как отдельный html, отображаемый с помощью запроса ajax

JavaScript должен быть применен к объекту в шаблоне, то есть:

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

Я проверил этот похожий вопрос , но лучшие ответы, похоже, основаны на том, что текущий скрипт является последним в переменной 'scripts', поскольку следующие еще не загружены. Если я добавлю html и js с помощью запроса ajax, этого не произойдет.

Чтобы быть на 100% ясным: вопрос в том, чтобы получить предыдущий объект БЕЗ ссылки на какой-либо конкретный атрибут: нет уникального идентификатора для тега, нет случайного идентификатора, поскольку теоретически всегда есть вероятность, что он появится дважды, нет уникального класса атрибут, так как точно такой же компонент может отображаться в другой части документа HTML.

Answer 1

Простое решение, включающее двухэтапный процесс:

1) выяснить, к какому элементу относится тэг скрипта

2) найти предыдущего брата этого элемента

в коде:

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

Это хорошее веб-программирование?Нет. Вы должны знать, к каким элементам должны применяться эффекты, основываясь на том, что вы генерируете.Если у вас есть div с идентификатором, этот идентификатор уникален, и ваш генератор может сказать, что если он генерирует этот div, ему также придется сгенерировать js, который устанавливает для него эффект jQuery.

Нодавайте проигнорируем это;это работает?Как шарм.

Answer 2

Вам нужно получить способ ссылаться на тег скрипта сразу после div "grid". Как сказал @Mark, самый простой способ сделать это - присвоить тегу script уникальный идентификатор. Если это не под вашим контролем, но вы делаете контролируете содержимое скрипта (подразумевается тот факт, что вы его создаете), вы можете сделать что-то вроде этого:

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? Да. Это работает? Также да.

Answer 3

Если вы можете дать своему <script/> блоку идентификатор, вы можете легко позвонить prev(), чтобы получить предыдущий элемент.

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

Пример использования jsfiddle .

Answer 4

Вот кое-что, что работает в FF, Chrome и IE 8, еще нигде не опробовано. Он просматривает элемент перед последним элементом на странице (который является синтаксическим анализом скрипта), сохраняет его локально (с помощью функции, вызывающей себя), чтобы обработчик загрузки мог его использовать.

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>

Сказав это. Я все еще должен упомянуть, что вы тесно связываете поведение (JS) и HTML, помещая их в один и тот же файл, что противоречит веб-процессу их разделения. Кроме того, я не знаю, как можно ожидать, что это будет работать с AJAX-запросом, поскольку вы не просто добавляете его в HTML, так как он обрабатывается. В этом случае было бы очень легко получить ссылку на только что вставленный html.