Question

我希望以下代码加载一系列“持有者”类。然而，after（）方法似乎是嵌套持有者。

当前代码

<div class="holder" >
    <a href="test.html" class="link">lorem ipsum</a><br />
</div>

<script type="text/javascript">
    $(document).ready(function () { 

        $('.link').click(function (event) {
            var newHolder = $('.holder').after()
            newHolder.load(this.href);
            event.preventDefault();
            return false;
        });       

    });
</script>

**所需的输出**

<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>

等

Answer 1

如果您希望它在当前链接之后，则会将DOM树级别提升到当前div.holder，然后再转到下一个.holder，然后调用加载。

$('.link').click(function(e) {
    var div = $('<div/>',{"class":"holder"}).load(this.href);
    $(this).parent().after(div);
    e.preventDefault();
});

编辑：被误解，需要创建div，是吗？

Answer 2

jQuery's .after() method“在匹配元素集合中的每个元素之后插入由参数指定的内容”。对于您描述的目标，这听起来像是正确的API调用。

但是，我发现你如何使用它有两个问题。

在;调用后省略after()时出现语法错误。这可能会导致导致脚本终止的JavaScript错误。

您不会将参数传递给after来电。目前尚不清楚您使用它的方式应该返回一个新的持有者对象。我仍然不完全清楚你要做什么，但我认为这可能会更好：

$('.link').click(function (event) {
    event.preventDefault();
    var linkHref = this.href;
    $('.holder').each(function(){
              $this = $(this);
              var $clone = $this.clone();
              $clone.load(linkHref);
              $this.after($clone);
          });
    return false;
});

您是否可以发布更完整的代码示例（或jsFiddle），包括HTML DOM示例，以便我们可以看到错误发生了什么？

Answer 3

我认为实现所需输出的最简单方法可能是：

$('.link').click(function(e) {
    e.preventDefault();
    $(this).parent().after('<div class="holder"></div>').load(this.href);
});

加载到下一个元素

3 个答案: