jQuery .wrap()问题

Question

我和jQuery有点问题

$(document).ready(function() {
    var foo = $("<div><h1>Bar</h1><p>Hi</p><h1>Baz</h1><p>bye</p></div>");
    foo.filter("h1,h2").map(function(id) {
        $(this).wrap('<span color="red"/>');
    });
    alert(foo.html());
});

此代码输出

<h1>Bar</h1><p>Hi</p><h1>Baz</h2><p>bye</p>

跨度是无处可见的。我做错了什么？

Answer 1

它没有任何效果，因为.filter()会在那个级别过滤元素，你可能需要.find()来获得像这样的后代：

$(document).ready(function() {
    var foo = $("<div><h1>Bar</h1><p>Hi</p><h1>Baz</h1><p>bye</p></div>");
    foo.find("h1,h2").wrap('<span color="red"/>');
    alert(foo.html());
});

You can test it out here。还请注意，对于looping...but，您应该使用.each()而不是.map()。这里没有必要，因为您可以直接调用.wrap()。

Answer 2

你不想在这里使用filter，你想要使用find。另外，您为什么要使用map

$(document).ready(function() {
  var foo = $("<div><h1>Bar</h1><p>Hi</p><h1>Baz</h2><p>bye</p></div>");
  foo.find("h1,h2").wrap('<span color="red"/>');
  alert(foo.html());
});

Live test

Answer 3

首先:您的标记无效(Baz由一个开始的h1和一个结束的h2包装)。但是.map reference说你需要返回值。

$(document).ready(function() {
    var foo = $("<div><h1>Bar</h1><p>Hi</p><h1>Baz</h1><p>bye</p></div>");
    var bar = foo.find("h1,h2").map(function(id) {
        return $(this).wrap('<span color="red"/>');
    });

});