将 div 克隆为 obj 并对其进行操作

Question

我有以下代码。目标是取消隐藏包含 hidden 类的 div 并将其排序到列表的顶部。但是，我希望能够将#master div 克隆到一个对象中，例如。 var x = $('#master') 并且我希望能够在该对象上运行多个操作，而不是硬编码代码。

<style>
     .hidden { display: none; }
</style>

<div id="master">
<div class="item" id="z">
    <div>
        <span>z</span>
    </div>
</div>
<div class="item" id="y">
    <div>
        <span>y</span>
    </div>
</div>
<div id="x" class="item hidden">
    <div>
        <span>x</span>
    </div>
</div>
<div id="w" class="item hidden">
    <div>
        <span>w</span>
    </div>
</div>

<script>
function asc_sort(a, b) {
     return ($(b).text()) < ($(a).text()) ? 1 : -1;
}
</script>

在基本代码中我想做类似的事情

// clone #master into #temp for manipulating
$('#master').clone().append($("#temp"));
// unhide all divs with class of hidden
$('#temp .hidden').css('display', 'block');
// sort items alphabetically
$('#temp .item').sort(asc_sort);
// replace contents of #master with newly sorted #temp

相反，我想做更多类似的事情

var cloneObj = $('#masterlist');
cloneObj.find('.hidden').removeClass('hidden').sort(asc_sort);
$('#master').empty().html(cloneObj);     

我不想在直接代码上做这样的事情

var x = `$('#masterlist .hidden').css('display', 'block').clone().sort(asc_sort); 
$('#master').empty().html(x);

我想直接操作obj

Answer 1

如果您只想“取消隐藏包含隐藏类的 div 并将其排序到列表顶部”，您可以这样做：

$('.hidden').removeClass('hidden').prependTo('#master');

查看：http://jsfiddle.net/gmd4M/1/

另外，一个元素上不能有两个class 属性。在您的 html 中：

<div class="item" id="w" class="hidden">

不正确。

Answer 2

您可以根据他们的类对 master 中的所有 divs 进行排序：

var master = $('#master');
$('div', master).sort(function (a, b) {
    if ($(a).hasClass('hidden')) {
        return -1;
    }

    return 1;
}).appendTo(master).removeClass('hidden');

如果你需要移除隐藏类，你可以在appendTo(master)之后链接它。

见Fiddle