如何从元素数组中获取元素并渲染它？

Question

I have array of elements I would like to find an element from array by class and I need to separate the element from array?

var mainEl=$(htmlContent);

/*
mainEl:

[el1,el2.classItem,el3#funID]

*/
var needEl;
mainEl.each(function(){
if($(this).hasClass("classItem"))
 needEl=$(this)
});

//render content without needEl
$(".container").append(mainEl);
//render seperatly needEl
$(".separate").append(needEl);

But this is not working as Expected,

is there any simple way to do it or am I doing wrong?

Answer 1

There are a number of ways you could do this. If I understand you right, this is one good way:

var $content = $(htmlContent);
var $separate = $content.filter('.classItem');
var $main = $content.not( $separate );
$(".container").append( $main );
$(".separate").append( $separate );

Answer 2

This is pretty straightforward when you use the following helper function:

$.fn.others = function() {
    return this.end().not(this);
};

It effectively reverses the previous operation. This is how you could use it:

$(htmlContent)
    .filter('.classItem') // take .classItem first
      .appendTo('.separate') // and append to separate
    .others() // take the remaining items
      .appendTo('.container'); // and append to main

Answer 3

It'd be easier to help you if you described in greater detail what you mean by "not working as Expected". You're not removing needEl from the mainEl collection, that would be one issue.

You could do something like this:

var mainEl = $(htmlContent);
$('.container').append( mainEl.filter(function() { return !$(this).hasClass('classItem');  }) );
$('.separate').append( mainEl.filter(function() { return $(this).hasClass('classItem');  }) );