How to wrap dynamically selected ids using jquery or javascript

I am working on a project in Google Blogger. First i want to explain a thing.

In blogger every post that is created has a unique id assigned to it by blogger itself. This id can be retrieved using Blogger JSON. So i have retrieved the ids of four recent posts using JSON.

I want to wrap these first four id containers around a DIV container using JQuery or Javascript.

The problem is when i use these ids absolutely in the selector $ and use the wrapAll() function the id container's gets wrapped up.

But as i said i'm using JSON to get the container id's so the values of ID's are stored in variable's and when i use those variable as selection for wrapAll() function it doesn't work.

I have demos of both those situation's which can be seen by going to this blog http://youblog-demo.blogspot.com/ and using the firebug console to run these code.

Situation 1 when i use absolute container ids

var script = document.createElement("script");
script.src = "http://youblog-demo.blogspot.com/feeds/posts/default?alt=json&callback=hello";
document.body.appendChild(script);
function hello(json){
if(json.feed.entry.length>4){
var post_num=4;
var id_coll = new Array();
for(i=0; i<post_num; i++){
    var ids = json.feed.entry[i].id.$t;
    var post_id = ids.substring(ids.indexOf("post-"));
    var only_id = post_id.substring(5);
    id_coll[i] = only_id;
}
$("#3337831342896423186,#12389217794525665开发者_C百科6,#9095347670334802803,#2525451832509945787").wrapAll('<div>');
}
};

Situation 2 when i use variable's to select the containers

var script = document.createElement("script");
script.src = "http://youblog-demo.blogspot.com/feeds/posts/default?alt=json&callback=hello";
document.body.appendChild(script);
function hello(json){
if(json.feed.entry.length>4){
    var post_num=4;
    var id_coll = new Array();
    var front_name = "#";
    for(i=0; i<post_num; i++){
        var ids = json.feed.entry[i].id.$t;
        var post_id = ids.substring(ids.indexOf("post-"));
        var only_id = post_id.substring(5);
        id_coll[i] = only_id;
    }
var joined_id_0 = String.concat(front_name,id_coll[0]);
var joined_id_1 = String.concat(front_name,id_coll[1]);
var joined_id_2 = String.concat(front_name,id_coll[2]);
var joined_id_3 = String.concat(front_name,id_coll[3]);
$(joined_id_0,joined_id_1,joined_id_2,joined_id_3).wrapAll('<div>');
}
};

So when i use the situation 2 code then it doesn't work but the situation1 code works fine. Can anybody help me with this

You need to pass in the selector as a string, not a list of arguments;

$(joined_id_0+', '+joined_id_1+', '+joined_id_2+', '+joined_id_3).wrapAll('<div>');

Or even better, replace all of:

var joined_id_0 = String.concat(front_name,id_coll[0]);
var joined_id_1 = String.concat(front_name,id_coll[1]);
var joined_id_2 = String.concat(front_name,id_coll[2]);
var joined_id_3 = String.concat(front_name,id_coll[3]);
$(joined_id_0,joined_id_1,joined_id_2,joined_id_3).wrapAll('<div>');

With:

$('#'+id_coll.join(', #')).wrapAll('<div>');

And remove the line: var front_name = '#';

You have to concatenat the ids, separated by a comma, as in #id1, #id2, ....

You can do that this way:

[joined_id_0,joined_id_1,joined_id_2,joined_id_3].join(',')

The whole line:

$([joined_id_0,joined_id_1,joined_id_2,joined_id_3].join(',')).wrapAll('<div>');

If it doesn't works, check the what is returned by [joined_id_0,joined_id_1,joined_id_2,joined_id_3].join(',') (alert() it, or use console.log).