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

我使用下面的html/jquery根据包含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>

---

这个很好用。但我想隐藏除前10个有序子元素之外的所有元素。有没有一种方法可以通过添加计数器和show/hide类来修改jquery函数来实现这一点？或者，排序完成后是否需要触发第二个函数？我正在寻找最有效的方法，但不确定如何进行。

您可以使用

.slice（10.hide（）

演示

演示仅首先显示2


函数给定的格式顺序（父级、子级）{
变量$wrapper=$（父分区）；
$wrapper.find（child_div）.sort（函数（a，b）{
return+a.getAttribute（'data-price'）-+b.getAttribute（'data-price'）；
})
.appendTo（$wrapper）.slice（2.hide（）；
}
giveFormatOrder（“#parent_div”、“.child_div”）

项目十
项目y
项目z
您可以使用
.slice（10.hide（）

演示

演示仅首先显示2


函数给定的格式顺序（父级、子级）{
变量$wrapper=$（父分区）；
$wrapper.find（child_div）.sort（函数（a，b）{
return+a.getAttribute（'data-price'）-+b.getAttribute（'data-price'）；
})
.appendTo（$wrapper）.slice（2.hide（）；
}
giveFormatOrder（“#parent_div”、“.child_div”）

项目十
项目y
项目z
通过切片和使用jquery追加

注意：隐藏的子项在DOM中不可用


函数给定的格式顺序（父级、子级）{
变量$wrapper=$（父分区）；
$wrapper.find（child_div）.detach（）.sort（函数（a，b）{
返回$（a）.data（'price'）-$（b）.data（'price'）；
}).slice（0,3）.appendTo（$wrapper）；
}
giveFormatOrder（“#parent_div”、“.child_div”）

项目x 102
项目y 95
项目z 210
项目z 110
项目z 10
项目z 140
通过切片和使用jquery追加

注意：隐藏的子项在DOM中不可用


函数给定的格式顺序（父级、子级）{
变量$wrapper=$（父分区）；
$wrapper.find（child_div）.detach（）.sort（函数（a，b）{
返回$（a）.data（'price'）-$（b）.data（'price'）；
}).slice（0,3）.appendTo（$wrapper）；
}
giveFormatOrder（“#parent_div”、“.child_div”）

项目x 102
项目y 95
项目z 210
项目z 110
项目z 10
项目z 140
您可以使用css隐藏10号之后的项目-请参阅。您可以使用css隐藏10号之后的项目-请参阅。
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');