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

Question

我有元素数组我想按类从数组中找到一个元素，我需要将元素与数组分开？

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

但这并没有按预期工作，

有什么简单的方法可以做到，还是我做错了？

Answer 1

有很多方法可以做到这一点。如果我理解正确，这是一种好方法：

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

Answer 2

当您使用以下辅助函数时，这非常简单：

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

它有效地逆转了之前的操作。这是您可以使用它的方式：

$(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

如果您更详细地描述“未按预期工作”的含义，那么为您提供帮助会更容易。您不会needEl从mainEl收藏中删除，那将是一个问题。

你可以这样做：

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