Question

我想根据.choice_result子值的值对.score div进行排序。因此，对于我的js，.choice_result的{{1}}在100％之内，应该是第一个div，而不是最后一个。这是js：

.score

我该怎么做？

Answer 1

＆＃13;

datetime

＆＃13;

$(".choice_result").sort(function(a, b) {
  a = parseFloat($(".score", a).text()); // get the value of .score element inside a
  b = parseFloat($(".score", b).text()); // get the value of .score element inside b
  return b - a;                          // sort descendently
}).appendTo(".poll_results");

＆＃13;

.choice_result {
  border: 1px solid red;
  margin: 5px;
}

＆＃13;

<强>解释

获取所有<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="poll poll_answered"> <div class="poll_div"> <h1><strong>Percentages</strong></h1> <div class="poll_results" style="display: block;"> <div class="choice_result" data-choice_percent="0"> <p class="choice_result_text">First <p> <div class="choice_result_width"> </div> <span class="score">30%</span> </div> <div class="choice_result" data-choice_percent="0"> <p class="choice_result_text">Second <p> <div class="choice_result_width"> </div> <span class="score">0%</span> </div> <div class="choice_result" data-choice_percent="100"> <p class="choice_result_text">Third <p> <div class="choice_result_width"> </div> <span class="score">100%</span> </div> </div> </div>元素（.choice_result）。然后使用$(".choice_result")函数对每两个元素.sort和a进行排序，获取每个b的{{1}}元素，然后使用{{.score获取文本1}}使用$(".score", a or b)功能并解析.text前的数字，如果%应该在parseFloat之前，则返回负数，否则返回正数（{{1} }）。排序后，将元素重新添加回其容器（a）。

Answer 2

这可能就是你要找的东西：

$('.poll_results.sort-by-score').each(function(){
  $(this).html(
    $(this).find('.choice_result').sort(function(a, b) {
      let dsa = parseInt($(a).find('.score').eq(0).text()),
          dsb = parseInt($(b).find('.score').eq(0).text());
      return (dsa > dsb ? -1 : (dsa < dsb) ? 1 : 0);
    })
  );  
});

$('.poll_results.sort-by-score').each(function(){
  $(this).html(
    $(this).find('.choice_result').sort(function(a, b) {
      let dsa = parseInt($(a).find('.score').eq(0).text()),
          dsb = parseInt($(b).find('.score').eq(0).text());
      return (dsa > dsb ? -1 : (dsa < dsb) ? 1 : 0);
    })
  );  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="poll poll_answered">
  <div class="poll_div">
    <h1><strong>Percentages</strong></h1>
    <div class="poll_results sort-by-score" style="display: block;">

      <div class="choice_result" data-choice_percent="0">
        <p class="choice_result_text">First
        <p>
            <div class="choice_result_width"></div>
            <span class="score">0%</span>
      </div>


      <div class="choice_result" data-choice_percent="0">
        <p class="choice_result_text">Second
        <p>
            <div class="choice_result_width"></div>
            <span class="score">0%</span>

      </div>

      <div class="choice_result" data-choice_percent="100">
        <p class="choice_result_text">Third
        <p>

            <div class="choice_result_width"></div>
            <span class="score">100%</span>

      </div>
    </div>
  </div>
</div>
<div class="poll poll_answered">
  <div class="poll_div">
    <h1><strong>Not sorted percentages</strong></h1>
    <div class="poll_results" style="display: block;">

      <div class="choice_result" data-choice_percent="0">
        <p class="choice_result_text">First
        <p>
            <div class="choice_result_width"></div>
            <span class="score">0%</span>
      </div>


      <div class="choice_result" data-choice_percent="0">
        <p class="choice_result_text">Second
        <p>
            <div class="choice_result_width"></div>
            <span class="score">0%</span>

      </div>

      <div class="choice_result" data-choice_percent="100">
        <p class="choice_result_text">Third
        <p>

            <div class="choice_result_width"></div>
            <span class="score">100%</span>

      </div>
    </div>
  </div>
</div>

它会根据您网页上每个.choice_result个实例中text()的{{1}}值重新排序.score。

重要说明：此解决方案假设.poll_results.sort-by-score是.choice_result中唯一的子项，就像您的问题一样。

根据子元素的值对div进行排序

2 个答案: