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.

Hard to tell what you want to do, please rephrase. What do you think the second parameter to $('div', param) does? See api.jquery.com/jQuery — Ruan Mendes
– Ruan Mendes, Commented Nov 16, 2012 at 20:48

dfsq · Accepted Answer · 2012-11-16 20:51:55Z

2

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

answered Nov 16, 2012 at 20:51

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gilly3 · Accepted Answer · 2012-11-16 20:58:18Z

2

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

edited Nov 16, 2012 at 20:58

answered Nov 16, 2012 at 20:50

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

3 Comments

Ruan Mendes Over a year ago

This could possibly be what the OP wanted, do you have a crystal ball?

gilly3 Over a year ago

@JuanMendes - He said he wants o.content to change from "<div><span>hello</span></div>" to "<div class='test'><span>hello</span></div>". This does that. That is, assuming he wants a string and not a jQuery object. If Musa's comment is addressed, we'll find out.

Ruan Mendes Over a year ago

I was just marveling at how you figured that out from the question (now that it's been rephrased, it's easier to see it)

jbabey · Accepted Answer · 2012-11-16 20:54:21Z

1

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/

answered Nov 16, 2012 at 20:54

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

Comments

Selvakumar Arumugam · Accepted Answer · 2012-11-16 20:51:30Z

1

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/

answered Nov 16, 2012 at 20:51

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Comments

Ruan Mendes · Accepted Answer · 2012-11-16 20:58:39Z

1

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>

answered Nov 16, 2012 at 20:58

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Comments

Kevin Boucher · Accepted Answer · 2012-11-16 20:59:43Z

1

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/

answered Nov 16, 2012 at 20:59

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

Comments

mako-taco · Accepted Answer · 2012-11-16 21:00:32Z

1

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/

answered Nov 16, 2012 at 21:00

mako-taco

7325 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery syntax not setting object property

7 Answers 7

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related