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

时间:2013-06-05 05:48:26

标签: javascript jquery jquery-ui

我有一些元素我希望逐个数组地找到一个元素,我需要将该元素与数组分开?

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

但这不符合预期,

有没有简单的方法可以做到这一点,还是我做错了?

3 个答案:

答案 0 :(得分:3)

有很多方法可以做到这一点。如果我理解你的话,这是一个好方法:

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

答案 1 :(得分:1)

使用以下辅助函数时,这非常简单:

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

答案 2 :(得分:0)

如果您更详细地描述了“不按预期工作”的含义,那么帮助您会更容易。您没有从needEl集合中移除mainEl,这只是一个问题。

你可以这样做:

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