jQuery syntax not setting object property

Question

My jQuery question I beleive is pretty simple, which is driving me insane that I can't get it.

I have an object with a property "content", I want to be able to take that object, manipulate the property "content" with jQuery and then overwrite the value with the new value jQuery creates.

Example:

o.content = "<div><span>hello</span></div>";
$('div', o.content).addClass('test');

At this point I want o.content to be equal to <div class='test'><span>hello</span></div>

I can not for the life of me figure out the syntax. Any help is really appreciated.

Answer 1

Parse the html in o.content , add the class, append the parsed html to a new <div> , and get the html of the new div:

o.content = "<div><span>hello</span></div>";
var el = $(o.content).addClass('test');
o.content = $("<div>").append(el).html();

Edit: This assumes you want o.content to still contain a string, rather than a jQuery object. In that case, it's simpler:

o.content = $(o.content).addClass('test');

Answer 2

如果需要的话，这将为您提供一个字符串<div class="test"><span>hello</span></div> ：

$(o.content).addClass('test').wrap('<div>').parent().html();

Answer 3

I don't think you can lookup an element from a string like that.. I would rather do it like below,

var content = "<span>hello</span>";
content = $('<div/>', {class: 'test'}).html(content)

DEMO: http://jsfiddle.net/k4e5z/

Answer 4

from the docs of the jquery function , context must be

A DOM Element, Document, or jQuery to use as context

Your context ( o.content ) is a string. Also, the jQuery function is not able to select the entire context, it can only select elements in that context.

Try this instead:

// make o.content a jquery element, not a string
o.content = $("<div><span>hello</span></div>");

// select on something inside the context (inside the div), not the div itself
$('span', o.content).addClass('test');

http://jsfiddle.net/JfW4Q/

Answer 5

You want the following

o.content = "<div><span>hello</span></div>";
// Create a jQuery object you can call addClass on
var docFragment = $(o.content);
docFragment.addClass('test');
// Since there's no outerHTML in jQuery, append it to another node
var wrapper = $('div');
docFragment.appendTo(wrapper);
// The HTML of the wrapper is the outerHTML of docFragment
console.log(wrapper.html()); // outputs <div class='test'><span>hello</span></div>

Answer 6

Why not do it all in one line:

var o = {};
o.content = $( "<div></div>" )     // create element
    .addClass('test')              // add class
    .html( '<span>hello</span>' ); // append content

Fiddle: http://jsfiddle.net/kboucher/eQmar/

Answer 7

o.content = $("<div><span>hello</span></div>");
o.content.addClass('test');

o.content is a jQuery object in this example, as opposed to just a string. Here's a demo on jsfiddle: http://jsfiddle.net/cvbsm/1/