Question

我已使用appendTo()将元素插入到DOM中。我尝试从附加元素内部遍历DOM，以获得对附加元素附加到的元素的引用。但这似乎对我不起作用。我已经通过将parent()的结果输出到控制台来完成了一些故障排除。每次我退回一个级别时，我都会从parent()得到一个结果，直到我到达附加元素的父级。此时parent()返回一个空集。

以下是用于说明此问题的代码示例：

  <div class="menu">
     <span class="like current"></span>
     <span class="done"></span>
     <span class="add"></span>
     <span class="report"></span>
     <div class="panel">
        <div class="panel-content">
           <p>This function is not yet implemented</p>
           <p>
              <a class="cancel" onclick="cancel_panel(this)">Cancel</a>
           </p>
        </div>
     </div>
  </div>

div.panel附加到div.menu appendTo()，div.panel-content附加到div.panel appendTo()

我想要实现的是在点击取消链接时从current删除课程span.like。

我试过了：

 $(elem).closest("div.menu").children("span.current").removeClass("current");

（其中elem是对取消链接的a元素的引用）

但它不起作用。 $(elem).closest("div.menu")返回空集而不是div.menu

在进一步的问题排查中，$(elem).parent()为我提供了对p代码的预期引用，$(elem).parent().parent().parent()为我提供了对div.panel的预期引用。但是$(elem).parent().parent().parent().parent()会返回一个空集。

这里发生了什么？在遍历DOM时，附加元素的响应方式与实际元素的响应方式不同吗？ jquery是否通过嵌套附加松散了该图？如何获得对div.menu的参考？

Answer 1

我尝试使用脚本再现您的问题here：

$(function() {

    var elem = $('<a class="cancel">Cancel</a>')
        .click(cancel_panel)
        .appendTo($(".panel-content").children().last());


    function cancel_panel() {                 
        $(elem).closest("div.menu")
        .children("span.current")
        .removeClass("current");
    }     
});

＆安培;上面的HTML。但是找不到任何问题：

$(elem).closest("div.menu").children("span.current").removeClass("current");

看看它＆amp;检查问题是否在其他地方。

Answer 2

尝试找到您的“当前”类并在该元素重命名为“like”

Answer 3

$(elem).parents().filter(".menu").children("span.current").removeClass("current");

我做了一个测试here，看起来效果很好。

Answer 4

问题解决了。 jquery附加元素的DOM遍历工作得很好。 hungerpain的jsfiddle演示证明我在问题中包含的部分代码没有问题。这是另一回事。在重新检查我的代码之后，我发现在我试图遍历它之前我已经从DOM中删除了div.panel，所以难怪它不起作用！

获取附加元素的父级

4 个答案: