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

【问题标题】：Getting the current script DOM object in a (jquery) ajax request在 (jquery) ajax 请求中获取当前脚本 DOM 对象
【发布时间】：2011-07-13 04:30:48
【问题描述】：

我有一个包含一些 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>

我检查了this similar question，但最好的答案似乎依赖于当前脚本是“脚本”变量中的最后一个脚本，因为下一个脚本尚未加载。如果我在 html 和 js 中附加一个 ajax 请求，就不会这样了。

100% 明确：问题是关于在不引用任何特定属性的情况下获取前一个对象：标签没有唯一 id，没有随机 id，因为理论上它总是有机会出现两次，没有唯一类属性，因为完全相同的组件可以显示在 HTML 文档的另一部分。

【问题讨论】：

前面的元素是指 $("item_14")?。如果是这样，谁在生成这些 ID？听起来好像生成这些 id 的东西可以很容易地告诉 JavaScript 插入它。
前面的元素是指网格 div。问题是在不引用唯一 ID 的情况下引用前一个元素的可能性，因为任何对象都可以在当前页面的多个 DOM 对象中表示。就此而言，我通常将数字 id 引用放在类属性中而不是 id 中。例如，这里使用了 id

标签： javascript jquery reflection tags

【解决方案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>

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

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

【讨论】：

行previousElement = previous.previousSibling;应该是 previousElement = previousElement.previousSibling; ??

【解决方案2】：

如果您可以为您的 <script/> 块提供一个 ID，您可以轻松调用 prev() 来获取前一个元素。

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

jsfiddle 上的示例。

【讨论】：

Monte Hayward's comment: "@Mark : id 属性在 script 元素中不受支持。我已经看到这会影响 Chrome 中的执行。w3.org/TR/REC-html40/interact/scripts.html#h-18.2.1 "

【解决方案3】：

您需要找到一种在“网格”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>");
}

黑客？是的。它有效吗？还有，是的。

【讨论】：

【解决方案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 中。在这种情况下，很容易获得对您刚刚插入的 html 的引用。

【讨论】：