在 (jquery) ajax 请求中获取当前脚本 DOM 对象

Question

我有一个包含一些 javascript 的 html 组件。

使用

• 该组件是模板引擎中的一个文件，因此它可以在整个 html 页面的初始渲染中
• ，作为通过 ajax 请求渲染的独立 html

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>

I'已经检查了这个类似的问题< /a> 但最好的答案似乎依赖于当前脚本是“scripts”变量中的最后一个脚本，因为下一个脚本尚未加载。如果我用ajax请求附加html和js，就不会出现这种情况。

100%清楚：问题是如何获取前一个对象而不引用任何特定属性：标签没有唯一的ID，没有随机ID，因为理论上它总是有机会出现两次，没有唯一的类属性，如完全相同的组件可以显示在 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>

这是好的 Web 编程吗？不。您应该知道哪些元素应该根据您生成的内容应用效果。如果你有一个带有 id 的 div，那么该 id 是唯一的，并且你的生成器可以告诉你，如果它生成该 div，它还必须生成为其设置 jQuery 效果的 js。

但让我们忽略这一点；有效吗？就像一个魅力。

Answer 2

如果您可以为您的

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

jsfiddle 上的示例。

Answer 3

您需要找到一种方法来在“grid”div 之后立即引用脚本标记。正如 @Mark 所说，最简单的方法是为脚本标签提供唯一的 id。如果这超出了您的控制范围，但您确实可以控制脚本内容（由于您正在创建脚本而隐含），您可以执行以下操作：

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 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 紧密耦合在一起，将它们放入同一个文件中，这违背了分离它们的 Web 流程。另外，我不知道您希望它如何与 AJAX 请求一起使用，因为您不仅仅是在渲染时将其添加到 HTML 中。在这种情况下，很容易获得对刚刚插入的 html 的引用。