CODEWITHSUNDEEP
javascriptjquery
Chad Caldwell
Chad Caldwell

Reputation: 274

jQuery syntax not setting object property

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.

Upvotes: 1

Views: 136

Answers (7)

mako-taco
mako-taco

Reputation: 732

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/

Upvotes: 1

Kevin Boucher
Kevin Boucher

Reputation: 16675

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/

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92274

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>

Upvotes: 1

gilly3
gilly3

Reputation: 91487

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');

Upvotes: 2

jbabey
jbabey

Reputation: 46647

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/

Upvotes: 1

dfsq
dfsq

Reputation: 193261

This will give you a string <div class="test"><span>hello</span></div> if this is what you want:

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

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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/

Upvotes: 1

Related Questions