Question

我有以下代码。目标是取消隐藏包含隐藏类的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

您可以根据他们的类对主人中的所有div进行排序：

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

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

如果您需要删除隐藏的类，可以在appendTo(master)。

之后将其链接

请参阅Fiddle

将div克隆到obj并操纵它

2 个答案: