在 .detach() 之后恢复 jQuery 对象

Posted 2023-02-16

【中文标题】在 .detach() 之后恢复 jQuery 对象

【英文标题】：Restoring jQuery objects after .detach()

【发布时间】：2014-12-10 19:06:40

【问题描述】：

我在这个问题上转了一圈。我有一份房屋清单。我想删除不符合所选标准的房屋。每个房子都包含在一个 li 标签中。

我想我可以为页面上的所有 li 标签创建一个 jQuery 对象，对其进行操作，从页面中删除当前的 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"));

小提琴：http://jsfiddle.net/cc01euf2/

【问题讨论】：

使用 console.log(object) 和控制台（chrome 中的 f12）查看每个变量包含的内容。

你要找的jquery方法是$().find()。 $j_object.find(itemToShow).appendTo($("#items"))

@slicedtoad 我已经用控制台命令link 更新了小提琴，但我不确定如何从那里访问 li 标签。我可以看到对象的内容，但我不知道如何附加它们。

【参考方案1】：

所以，你有一个 集合 jquery 对象通过：

var $j_object = $("li");

本质上，这是一个类似的数组：

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

要从这个数组中选择一个元素，你必须使用filter。这与find 的作用相同，但它只搜索顶层。而find 搜索集合中每个元素的后代。

所以，

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

将获取#p456 元素并将其附加到#items。

另外，请注意$j_object 仍然引用#p456，即使在您附加它之后。

增删演示：http://jsfiddle.net/2Lyudrsj/1/

【参考方案2】：

与其从 DOM 中分离元素，不如考虑仅在它们符合或不符合您的条件时隐藏/显示它们。

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

示例：http://jsfiddle.net/dfdq49j4/2/

【讨论】：

谢谢...通常我会使用 show/hide，但这个项目在 Foundation 中使用 Block Grid，而 CSS 使 show/hide 的结果看起来像一个糟糕的俄罗斯方块播放器。