Восстановление объектов jQuery после .detach()

Question

Я собираюсь в кругах на этом. У меня есть список домов. Я хочу удалить дома, которые не соответствуют выбранным критериям. Каждый дом содержится в теге li.

Я думал, что могу создать объект jQuery всех тегов li на странице, манипулировать им, удалить текущие теги li со страницы и добавить новый список.

Но я застрял ...

<ul id="items"> 
<li id="p123">Property 1</li> 
<li id="p456">Property 2</li> 
<li id="p789">Property 3</li> 
</ul> 


var $j_object = $("li"); 
var clone = $j_object.clone(); 

$('li').detach(); 

itemToShow = '#p456'; 

// three options to restore list item 
$(itemToShow).appendTo($("#items")); 

$($j_object[itemToShow]).appendTo($("#items")); 

$($clone[itemToShow]).appendTo($("#items")); 

Fiddle: http://jsfiddle.net/cc01euf2/

Answer 1

Итак, у вас есть коллекция объектов Jquery через:

var $j_object = $("li"); 

По существу, это массив, как:

['li#p123', 'li#p456', 'li#p789'] //made up of elements, not strings obviously 

К выберите один элемент из этого массива, вы должны нам e filter. Это делает то же самое, что и find, но он ищет только верхний слой. В то время как find ищет потомков каждого элемента коллекции.

Так,

$j_object.filter('#p456').appendTo('#items'); 

получит #p456 элемент и добавить его в #items.

Также обратите внимание, что $j_object по-прежнему ссылается на #p456 даже после того, как вы его добавили.

Демо добавления и удаления: http://jsfiddle.net/2Lyudrsj/1/

Answer 2

Вместо того, чтобы отделить элементы из DOM, вы можете рассмотреть только скрытие/отображение их, если они делают или дон 't соответствует вашим критериям.

$('#items li').each(function() { 
    if($(this).html().indexOf('Property 2') > -1) { 
     $(this).hide(); 
    } else { 
     $(this).show(); 
    } 
}); 

Пример: http://jsfiddle.net/dfdq49j4/2/