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通過數據選項和類

回答

相關問題