Question

HTML：

<div class="album">
    <div class="listing">
        <a href="#" class="btn hidden">Button</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button</a>
    </div>
</div>

伪代码：

in each album
    each listing 
        hidden = find ('.btn.hidden')
    remove and append (move) all hidden to the bottom

我不确定如何删除元素然后追加？

Answer 1

可以尝试类似：

$('.album').each(function(){
   $(this).append( $(this).find('.listing').has('.btn.hidden') );    
});

append（）会自动删除

<强> DEMO

Answer 2

我假设你可以在页面上有多个专辑，并且你想保留这个项目所属的专辑：

＆＃13;

$('.album').append(function(){
   return  $('.listing',this).has('.btn.hidden');    
});

＆＃13;

.hidden{
  background-color:red
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="album">
    <div class="listing">
        <a href="#" class="btn hidden">Button (hidden1)</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button</a>
    </div>
   <div class="listing">
        <a href="#" class="btn hidden">Button (hidden2)</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button</a>
    </div>
</div>

<div class="album">
    <div class="listing">
        <a href="#" class="btn hidden">Button (hidden3)</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button</a>
    </div>
   <div class="listing">
        <a href="#" class="btn hidden">Button (hidden4)</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button</a>
    </div>
</div>

＆＃13;

Answer 3

我假设如果每个按钮有多个实例，您可能希望保留订单。鉴于以下标记：

<div class="album">
    <div class="listing">
        <a href="#" class="btn hidden">Button Hidden 1</a>
    </div>
    <div class="listing">
        <a href="#" class="btn hidden">Button Hidden 2</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button 1</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button 2</a>
    </div>
    <div class="listing">
        <a href="#" class="btn hidden">Button Hidden 3</a>
    </div>
    <div class="listing">
        <a href="#" class="btn">Button 3</a>
    </div>
</div>

您可以使用：

$('.album').each(function() {
    $('.listing').each(function() {
        if($(this).find('.btn.hidden').length > 0) $(this).appendTo($(this).closest('.album'));
    });
});

请参阅此处的小提琴：http://jsfiddle.net/teddyrised/pkdw1qp2/1/

Answer 4

$('.album .listing').each(function() {
    $(this).find('.btn.hidden').appendTo($(this));        
});

我不确定在.listing结束时你需要搬到哪里？ jsfiddle

根据条件对元素进行排序

4 个答案: