时间戳

首页 > 解决方案 > 根据特定数据属性的值差异对内容进行排序和追加

javascript - 根据特定数据属性的值差异对内容进行排序和追加

问题描述

我正在尝试创建一个函数，该函数根据元素与指定“领导者”的数据属性值的数值分离对元素进行排序。

这是我想要实现的目标：

我希望保持领导者的位置，并且只将等于或大于领导者数据标题的元素排序/附加到各自的类别中。如何调整下面的代码以促进这样的事情？

var participant = $('.participant')
var leader = $('#leader')

$(participant).sort(function (a, b) {

  var contentA = parseInt( $('.participant').data('title'));
  var contentB = parseInt( $(leader).data('title'));
  
  if (contentA - contentB <= 4) {
  	$(participant).appendTo('#in-race');
  }
  else {
  	$(participant).appendTo('#out');
  }

});

   
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
.section-hold {
  margin: 2em 0;
  min-height: 40px;
  padding: 15px;
  display: block;
}
.participant{
  background-color: #EEE;
  padding: 20px;
  width: 70vw;
  margin: 10px auto;
  display: inline-block;
}
.name{
  float: left;
}
.score{
  float: right;
}
.section-title{
  margin: 10px 0;
  color: #FFF;
}
#participant-hold{
  outline: solid 1px grey;
}
#in-race{
  outline: solid 1px yellow;
}
#out{
  outline: solid 1px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-hold" id="participant-hold">
  <h3 class="section-title">PARTICIPANTS</h3>
  
  <div class="participant">
    <div class="name">LEADER</div>
    <div class="score" id="leader" data-title="18"><em>18</em></div>
  </div>
 
  <div class="participant">
    <div class="name">TEST 1</div>
    <div class="score" data-title="21.5"><em>21.5</em></div>
  </div>
  
  <div class="participant">
    <div class="name">TEST 2</div>
    <div class="score" data-title="28"><em>28</em></div>
  </div>
  
</div>

<div class="section-hold" id="in-race">
  <h3 class="section-title">PLAYOFFS</h3>
  
</div>


<div class="section-hold" id="out">
  <h3 class="section-title">OUT</h3>
  
</div>

标签： javascripthtmljquery

解决方案

要保持领导者就位并仅对其他参与者进行排序，您可以执行以下操作：

var participant = $('.participant:not(:has(#leader))');
var leader = $('#leader')

participant.each(function() {
   var contentA = parseInt($(this).find(".score").data("title"));
   var contentB = parseInt(leader.data("title"));
   if (contentA - contentB <= 4) {
      $(this).appendTo('#in-race');
   } else {
      $(this).appendTo('#out');
   }
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
.section-hold {
  margin: 2em 0;
  min-height: 40px;
  padding: 15px;
  display: block;
}
.participant{
  background-color: #EEE;
  padding: 20px;
  width: 70vw;
  margin: 10px auto;
  display: inline-block;
}
.name{
  float: left;
}
.score{
  float: right;
}
.section-title{
  margin: 10px 0;
  color: #FFF;
}
#participant-hold{
  outline: solid 1px grey;
}
#in-race{
  outline: solid 1px yellow;
}
#out{
  outline: solid 1px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-hold" id="participant-hold">
  <h3 class="section-title">PARTICIPANTS</h3>

  <div class="participant">
    <div class="name">LEADER</div>
    <div class="score" id="leader" data-title="18"><em>18</em></div>
  </div>

  <div class="participant">
    <div class="name">TEST 1</div>
    <div class="score" data-title="21.5"><em>21.5</em></div>
  </div>

  <div class="participant">
    <div class="name">TEST 2</div>
    <div class="score" data-title="28"><em>28</em></div>
  </div>

</div>

<div class="section-hold" id="in-race">
  <h3 class="section-title">PLAYOFFS</h3>

</div>


<div class="section-hold" id="out">
  <h3 class="section-title">OUT</h3>

</div>

推荐阅读