Question

我正在尝试使用jQuery（3.1.1）来包装给定类的元素，然后将一个新的div作为包装器中的第一个元素。我尝试了很多东西，这是我能得到的。

testWrap = function() {
    var testWrapImpl = function(index, value) {
        var div = $("<div></div>");
        $(value).wrap(div);
        $(div).prepend("<div class='child-div'>some text</div>");   
        alert("done");
    };
$(".myClass").each(testWrapImpl);

这段代码成功地用外部div包装每个元素，但似乎没有对“some text”div做任何事情。

警报确实显示在页面中的每个元素中，并且页面似乎加载时没有错误。

我做错了什么？

Answer 1

.wrap()方法将包装器的副本包装在每个目标元素周围。因此，一旦你调用了.wrap()，你的div就是一个非常好的元素，但它不是真正的包装器。

你可以做的是在包装器中添加一个类，进行包装，然后找到包装器并添加额外的元素：

$(".myClass")
    .wrap("<div class='wrapper'></div>")
    .closest(".wrapper")
    .prepend("<div class='child-div'>some text</div>");

没有必要进行自己的.each()次迭代; jQuery例程将隐式执行此操作。如果您需要为“myClass”中的每个元素做出关于包装器的决策，您可以将函数传递给.wrap()。将为每个单独的元素调用该函数，其中一个参数包含列表中的索引，并且this绑定到该迭代的元素。函数中的代码可以检查元素或执行任何操作，函数的返回值将用作包装器。例如，为每个包装器提供一个编号类：

$(".myClass")
    .wrap(function(index) {
      return "<div class='wrapper wrapper-" + index + "'></div>";
    })
    .closest(".wrapper")
    .prepend("<div class='child-div'>some text</div>");

Answer 2

在使用.prepend()来实现您所追求的目标之前，您可以.wrap()。

此外，一旦将div变量定义为jQuery对象，就应该引用div变量而不是$(div)。

    var testWrapImpl = function(index, value) {
        $(value).wrap( '<div></div>' ).parent().prepend("<div class='child-div'>some text</div>");   
        alert("done");
    };
$(".myClass").each(testWrapImpl);

https://jsfiddle.net/2966pxqz/4/

包装每个元素，然后在包装器前面添加一个新的div？

2 个答案: