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。另外，为什么使用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 2

它没有任何效果，因为.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。另请注意，您应使用.each()代替.map()进行循环播放...但此处不需要，因为您可以直接拨打.wrap()。

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"/>');
    });

});

Answer 4

您需要.find()而不是.filter()，因为heading元素是嵌套的。

var foo = $("<div><h1>Bar</h1><p>Hi</p><h1>Baz</h1><p>bye</p></div>");

foo.find("h1,h2").wrap('<div color="red"/>');

另外，我将其更改为使用<div>代替<span>进行换行，因为我认为<span>包裹heading元素并不合适

jQuery .wrap（）问题

4 个答案: