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

Question

我想根据 .score 子值的值对 .choice_result div 进行排序。因此，在我下面的 js 中，.choice_result 的 .score 在 100% 以内，应该是第一个 div 而不是最后一个。这是 js:

<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">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>

我该怎么做？

Answer 1

这可能是您正在寻找的:

$('.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>

它将根据每个 .poll_results.sort-by 中 .score 的 text() 值重新排序 .choice_result -score 页面上的实例。

重要说明:此解决方案假定 .choice_result 是 .poll_results 的唯一子项，如您的问题所示。