时间戳

首页 > 解决方案 > 使用数据属性重新排序子元素并应用显示/隐藏

javascript - 使用数据属性重新排序子元素并应用显示/隐藏

问题描述

我正在使用以下 html/jquery 根据其 data-price 属性重新排序包含 div 的子元素。

<div id="parent_div">
 <div class="child_div" data-price="102">Item x</div>
 <div class="child_div" data-price="95">Item y</div>
 <div class="child_div" data-price="210">Item z</div>
</div>

HTML 由多个 AJAX 调用填充，因此初始结果没有排序，并且可能包含 50 多个子元素。一旦 AJAX 调用完成并填充了 HTML，我将运行以下 jquery：

function giveFormatOrder(parent_div, child_div) {

 var $wrapper = $(parent_div);

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

giveFormatOrder('#parent_div','.child_div');

这工作正常。但我想隐藏除前 10 个有序子元素之外的所有元素。有没有办法通过添加计数器和添加显示/隐藏类来修改 jquery 函数来实现这一点？或者排序完成后是否需要触发第二个功能？我正在寻找性能最高的方法，但不知道如何去做。

标签： javascriptjquery

解决方案

您可以使用.slice(10).hide();

演示

该演示仅首先显示 2。

function giveFormatOrder(parent_div, child_div) {

  var $wrapper = $(parent_div);

  $wrapper.find(child_div).sort(function(a, b) {
      return +a.getAttribute('data-price') - +b.getAttribute('data-price');
    })
    .appendTo($wrapper).slice(2).hide();
}

giveFormatOrder('#parent_div', '.child_div');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent_div">
  <div class="child_div" data-price="102">Item x</div>
  <div class="child_div" data-price="95">Item y</div>
  <div class="child_div" data-price="210">Item z</div>
</div>

推荐阅读