初始化jQuery对象（元素），然后将其放置在DOM中

Question

So, for a project I'm working on, I need to make users in a user selector sortable by network. The current way I am doing this is by creating the user:

clone += '<li class="'+ this.gender +'" data-id="'+ this._id +'">';
clone += '<img src="'+ this.image +'" />';
clone += '<span>'+ this.name +'</span>';
clone += '</li>';

Then having a jQuery object with the key being the network name and the value being an array of user ids, like:

{
  Network 1: [1,2,3,4]
  Network 2: [5,6,7,8]
}

Then, when a network is selected, I sort through all of li elements and match them against the array of ids and if it doesn't contain the id, hide the li element, like so:

for(var i = 0, n = education_ids[network].length;i < n;i++){
   $('.friends-list li[data-id='+ education_ids[network][i]+']').removeClass('chosen_network');
}

Unfortunately, it's really inefficient because basically for every iteration of the loop, the jQuery selector iterates over all the li elements, so if there are 1000 friends and 100 ids in the network, that's 100 1000 step iterations.

As a solution to this problem, I thought I might be able to add the jQuery objects to the array rather than the ids, so that way I could just iterate over them and add the classes (reducing the iterations 1000x). Here is how I'm currently trying to do that:

clone += '<li class="'+ this.gender +'" data-id="'+ this._id +'">';
clone += '<img src="'+ this.image +'" />';
clone += '<span>'+ this.name +'</span>';
clone += '</li>';

if(this.education){
    for(var i = 0, n = this.education.length; i < n ; i++){
    if(education[this.education[i].school.name]){
       education[this.education[i].school.name]++;
       education_ids[this.education[i].school.name].push($(clone));
    } else {
        education[this.education[i].school.name] = 1;
        education_ids[this.education[i].school.name] = [$(clone)];
    }
}
}

The relevant part is when I:

.push($(clone)

or initialize the array by doing:

[$(clone)]

Unfortunately, this technique doesn't work because at this point in my program, the elements actually haven't been added to the DOM. So, my question is as follows:

Is it possible to initialize these jQuery references BEFORE they are put into the DOM and if so, how would I do that?

And, if I can't do that, can you think of a more efficient way for me to solve this problem.

Just for reference, I am trying to make this faster because with the current strategy the looping freezes the DOM for anywhere between 1 and 2 seconds—not exactly the ideal experience for a user.

Thank you so much for any help you can give!

EDIT: Progress made, but hitting an error!

Ok, so I've made a little progress. Using the jQuery selector actually works, so now I'm doing:

    clone += '<li class="'+ this.gender +'" data-id="'+ this._id +'">';
    clone += '<img src="'+ this.image +'" />';
    clone += '<span>'+ this.name +'</span>';
    clone += '</li>';

    clone = $(clone)

    if(this.education){
        for(var i = 0, n = this.education.length; i < n ; i++){
            if(education[this.education[i].school.name]){
                education[this.education[i].school.name]++;
                education_ids[this.education[i].school.name].push(clone);
            } else {
                education[this.education[i].school.name] = 1;
                education_ids[this.education[i].school.name] = [clone];
            }
        }
    }

placeholder.push(clone);

And then after looping through all of the friends,

$('.friends-list').append(placeholder).fadeIn();

I think that should be working, but now I'm getting:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

Thoughts?

EDIT: More progress, fixed the error, but sorting not working

Ok, so I fixed the error by switching placeholder to an empty div like @Artimuz did, but now the sorting isn't working. So, basically I sort like this:

if("network is clicked and it was already selected") {
    for(var person in education_ids[network]){
        person.removeClass('chosen_network');
    }
} else //if it wasn't already selected {
     for(var person in education_ids[network]){
        person.addClass('chosen_network').removeClass('disabled');
}
}

Unfortunately, this doesn't work. I'm getting:

Uncaught TypeError: Object 0 has no method 'addClass'

And so, once again I ask: thoughts?

Answer 1

The slowest part of any javascript is touching the DOM. Store your users:

var users = [
    {
        name : "dave",
        gender : "male",
        image : "omg.jpg"
    }
];

Store your networks (assuming you have less networks than users):

var networks = [
    [2,5,8]
];

Draw appropriately when required:

var html = "";
for(var i = networks[current].length; i--;){
    var id = networks[current][i];
    html += '<li class="'+ users[id].gender +'" data-id="'+ id +'">';
    html += '    <img src="'+ users[id].image +'" />';
    html += '    <span>'+ users[id].name +'</span>';
    html += '</li>';
}
$(container).html(html);

This way you iterate once over each user, the pure data which is the user. And you touch the DOM once to draw everything which is required.

This has the drawback of redrawing all the currently displayed users, but if that is an issue (if most people are in all of the networks for example) the solution can be modified to cache which users have already been drawn, and add the new users more discretely.

Answer 2

OK so I'll try to summarize some of your bugs here :

For the first bug

No idea what was your problem. For me that worked.

jsfiddle.net/3xqx5

For the NOT_FOUND_ERR exception

It's just that you were trying to add a array , a pure javascript object, to the DOM. JQuery.append requires a jQuery object or a DOM element ! So you can put you items in a placeholder <div> or you iterate over your array and add items one by one.

jsfiddle.net/3xqx5/1

For the last error Object 0 has no method 'addClass'

The for statement you have done is not consistent, at least because it do a copy of each item at each iteration. Work directly on array elements by doing a for(var i=0; i < a.length; i++)

jsfiddle.net/3xqx5/2

Answer 3

Building HTML using string concatenation is horrible, please avoid that.

As per @Sinetheta's data structure

var template = [
    "<li>",
        "<img></img>",
        "<span></span>",
    "</li>"
].join("");

var nodes = [];
for(var i = networks[current].length; i--;){
    var id = networks[current][i],
        user = users[id];

    var li = $(template);
    li.addClass(user.gender);
    li.data("id", id);

    var children = node.children();
    children.eq(0).prop("src", user.image);
    children.eq(1).text(user.name);

    nodes.push(li);
}

$.each(nodes, function (_, node) {
    $(container).append(node);
});