JQuery.sort通过数据选项和类

我有一个JavaScript排序函数的问题。以下函数按数据价格属性降序对包装中的项目进行排序。JQuery.sort通过数据选项和类

HTML部分：

<div class="wrapper"> 
    <div class="item" data-price="1"></div> 
    <div class="item" data-price="2"class="blacklisted"></div> 
    <div class="item" data-price="3"></div> 
    <div class="item" data-price="4" class="blacklisted"></div> 
</div>

JQuery的部分：

var $wrapper = $('.wrapper'); 
    $wrapper.find('.item').sort(function (a, b) { 
     return -a.getAttribute('data-price') - -b.getAttribute('data-price'); 
    }).appendTo($wrapper);

现在我想改变jQuery的一部分，它按数据，价格和.blacklisted

当前回复

<div class="wrapper"> 
    <div class="item" data-price="4" class="blacklisted"></div> 
    <div class="item" data-price="3"></div> 
    <div class="item" data-price="2"class="blacklisted"></div> 
    <div class="item" data-price="1"></div> 
</div>

希望响应：

<div class="wrapper"> 
    <div class="item" data-price="3"></div> 
    <div class="item" data-price="1"></div> 
    <div class="item" data-price="4" class="blacklisted"></div> 
    <div class="item" data-price="2" class="blacklisted"></div> 
</div>

来源

2017-07-20 Jopy Downstair

对于大家谁是寻找一个不错的滤波器解决方案看看这个！ https://isotope.metafizzy.co/ –

的元素不应该有两个class属性。你可以链.filter(".blacklisted")然后调用.appendTo()

var $wrapper = $('.wrapper'); 
 
$wrapper.find('.item').sort(function(a, b) { 
 
    return +a.getAttribute('data-price') > +b.getAttribute('data-price') ? -1 : 1; 
 
}) 
 
.appendTo($wrapper) 
 
.filter(".blacklisted") 
 
.appendTo($wrapper);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div class="wrapper"> 
 
    <div class="item" data-price="1">price</div> 
 
    <div class="item blacklisted" data-price="2">blacklisted</div> 
 
    <div class="item" data-price="3">price</div> 
 
    <div class="item blacklisted" data-price="4">blacklisted</div> 
 
</div>

来源

2017-07-20 12:55:52 guest271314

为什么不应该有一个元素的两个类的属性？ –

JavaScript如何知道哪个属性适用？如果一个元素可以有两个'class'属性，为什么元素不能有两个'id'属性？ – guest271314

但你可以告诉我上面和你的答案之间的区别在哪里？ –

首先注意，在你的HTML元素div有两个class属性是无效的。你需要将他们加入到一个中。

要达到您的要求，您可以检查元素是否具有blacklisted类，然后适当地向上/向下移动它们。如果这两个班都没有，则可以按照您现在的情况，按data-price排序。试试这个：

var $wrapper = $('.wrapper'); 
 
$wrapper.find('.item').sort(function(a, b) { 
 
    if ($(a).hasClass('blacklisted') && !$(b).hasClass('blacklisted')) 
 
    return 1; 
 

 
    if ($(b).hasClass('blacklisted') && !$(a).hasClass('blacklisted')) 
 
    return -1; 
 

 
    return -a.getAttribute('data-price') - -b.getAttribute('data-price'); 
 
}).appendTo($wrapper);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="item" data-price="1">1</div> 
 
    <div class="item blacklisted" data-price="2">2b</div> 
 
    <div class="item" data-price="3">3</div> 
 
    <div class="item blacklisted" data-price="4">4b</div> 
 
</div>

来源

2017-07-20 12:54:37

这工作得很好！谢谢你，兄弟。 –

JQuery.sort通过数据选项和类

回答

相关问题