根据jquery中的条件在div中保留div在另一个div中

我有一个div其中包含其他div s。我想使用jQuery向下移动div，其data-keep-down属性为true。即我希望那些在其他div的末尾，其data-keep-down属性为false。下面是我的HTML。根据jquery中的条件在div中保留div在另一个div中

<div class="parent"> 
    <div class="terminalpopular" data-keep-down="true" data-park-type="meetandgreet" data-amount="65.95" data-type="Recommended"></div> 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="67.99" data-type="Featured"></div> 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="78" data-type="Christmas"></div> 
    <div class="terminalpopular" data-keep-down="true" data-park-type="meetandgreet" data-amount="54.95" data-type="Special Offer"></div> 
    <div class="terminalpopular" data-keep-down="false" data-park-type="park" data-amount="70" data-type="Recommended"></div> 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="75" data-type="Featured"></div> 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="84.99" data-type="Christmas"></div> 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="84.99" data-type=""></div> 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="94.95" data-type=""></div> 
</div>

和jQuery使用的是：

$('.parent > div').each(function(index, value) { 
    $(this).append(value); 
});

请帮助。由于

来源

2017-09-27 Owais

做ü意味着数据保持向下=“真”始终在顶部，其余folow中？ – karthik

data-keep-down =“true”应始终在END，即下面的其他位置。 – Owais

所以，你想重新排列''parent'里面的'div'？ – Ammar

这里是你如何能做到这一点：

$(document).ready(function() { 
 
    $(".terminalpopular").each(function() { 
 
    if ($(this).data('keep-down')) { 
 
     $(".parent").append($(this)); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="terminalpopular" data-keep-down="true" data-park-type="meetandgreet" data-amount="65.95" data-type="Recommended">65.95</div> 
 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="67.99" data-type="Featured">67.99</div> 
 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="78" data-type="Christmas">78</div> 
 
    <div class="terminalpopular" data-keep-down="true" data-park-type="meetandgreet" data-amount="54.95" data-type="Special Offer">54.95</div> 
 
    <div class="terminalpopular" data-keep-down="false" data-park-type="park" data-amount="70" data-type="Recommended">70</div> 
 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="75" data-type="Featured">75</div> 
 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="84.99" data-type="Christmas">84.99</div> 
 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="84.99" data-type=""> 
 
    84.99</div> 
 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="94.95" data-type="">94.95</div> 
 
</div>

来源

2017-09-27 10:19:11

您可以使用Attribute Equals Selector [name='value']和.append()方法

$('.parent').append(function() { 
 
    return $(this).find('div[data-keep-down="true"]'); 
 
}); 
 
//$('.parent > div[data-keep-down="true"]').appendTo('.parent')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div class="terminalpopular" data-keep-down="true" data-park-type="meetandgreet" data-amount="65.95" data-type="Recommended">1</div> 
 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="67.99" data-type="Featured">2</div> 
 
    <div class="terminalpopular" data-keep-down="false" data-park-type="meetandgreet" data-amount="78" data-type="Christmas">3</div> 
 
    <div class="terminalpopular" data-keep-down="true" data-park-type="meetandgreet" data-amount="54.95" data-type="Special Offer">4</div> 
 
    <div class="terminalpopular" data-keep-down="false" data-park-type="park" data-amount="70" data-type="Recommended">5</div> 
 
</div>

来源

2017-09-27 10:20:43 Satpal

试试这个：

$(document).ready(function() { 
    $(".terminalpopular").each(function() { 
    if ($(this).attr('data-keep-down')) { 
    $(".parent").append($(this)[0].outerHTML); 
    } 
    }); 
});

来源

2017-09-27 10:28:06 santho

JS Fiddle //通过排序真/假，以及金额

$(document).ready(function(){ 
    var $parentElem=$('.parent'); 
    var keepDownFalse=[]; 
     var keepDownTrue=[]; 
    $('.parent > div').each(function(index, value) { 
     var $this=$(this); 

     if(!$this.data('keep-down')){ 
      keepDownFalse.push({elem: $this, amount:$this.data('amount')}); 
     }else{ 
       keepDownTrue.push({elem: $this, amount:$this.data('amount')}); 
     } 
    }); 

     keepDownFalse.sort(function(a, b) { 
      return a.amount - b.amount; 
     }); 
     keepDownTrue.sort(function(a, b) { 
      return a.amount - b.amount; 
     }); 
     console.log(keepDownFalse,keepDownTrue); 
     $parentElem.empty(); 
     $.each(keepDownFalse,function(index,value){ 
      $parentElem.append(value.elem); 
     }) 
     $.each(keepDownTrue,function(index,value){ 
      $parentElem.append(value.elem); 
     }); 

})

来源

2017-09-27 10:49:37 user1428716

根据jquery中的条件在div中保留div在另一个div中

回答

相关问题