jQuery .wrap() question

i'm having some problems with 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());
});

This code outputs

<h1>Bar开发者_Go百科</h1><p>Hi</p><h1>Baz</h2><p>bye</p>

The span's are nowhere to be seen. What am I doing wrong?

---

It doesn't have any effect because .filter() filters elements at that level, you could need .find() to get descendants like this:

$(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. Also note you should use .each() instead of .map() for looping...but there's no need here, since you can just call .wrap() directly.

---

You don't want to use filter here, you want to use find. Also, why are you using 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

---

First off: your markup is invalid (Baz is wrapped by an opening h1 and a closing h2). But the .map reference says you need to return the value.

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

});

---

You need .find() instead of .filter() since the heading elements are nested.

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

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

Also, I changed it to wrap using a <div> instead of a <span> since I don't think it is valid to have a <span> wrapped around heading elements.