Wrapping an html String with JQuery

Question

So I have made the following fiddle:

Code:

$(document).ready(function(){
    var html = '<div><div class="c">1</div><div class="c">2</div></div>';
    //approach 1
    var $html = $(html);
    var $elts = (".c", $html);
    console.log($elts.length);
    //approach 2
    $elts = $(".c", $(html));
    console.log($elts.length);  
});

Output:

1
2

Why do these two approaches differ?

EDIT:

This is JQuery 1.10.1 by the way.

@j08691 I am expecting a jquery object containing the elements with class c, so in this case the two inner div elements. — thatidiotguy
– thatidiotguy, Commented Nov 15, 2013 at 18:25
But without the $ in front of the parenthesis, it's not a jQuery object. Only the $html inside is a jQuery object, the rest is ignored. You could have ("foo", $html); and still get a result of 1. — j08691
– j08691, Commented Nov 15, 2013 at 18:28

codingrose · Accepted Answer · 2013-11-15 18:20:18Z

4

var $elts = (".c", $html); considers element (outer) div

while

$elts = $(".c", $(html)); considers divs having .c.

answered Nov 15, 2013 at 18:20

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

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

2 Comments

thatidiotguy Over a year ago

I'm sorry but I am not understanding your explanation, could you elaborate a little bit.

codingrose Over a year ago

first statements considers outer (parent div only) because you have not used $. whereas second statement considers number of elements having class c. you got it?

Karl-André Gagnon · Accepted Answer · 2013-11-15 18:27:26Z

3

That's because the first one is not a jquery object :

var $elts = (".c", $html);

Doing (".c", $html) will only mean the var will equal the last value inside the bracket wich is the jQuery $html object.

Test it, try this

var $elts = ('anything', 4);
console.log($elts) // = 4;

if you do var $elts = $('.c', $html), both log will be the same :

http://jsfiddle.net/L3dTK/5/

answered Nov 15, 2013 at 18:27

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

1 Comment

Karl-André Gagnon Over a year ago

That comment mixed with your name made me smile :)

Collectives™ on Stack Overflow

Wrapping an html String with JQuery

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related