試圖通過

傳遞的數據基於價值觀動態呈現的div排序我有一個dict像這樣：試圖通過

choices = {'Mexico': 53, 'Panama': 1, 'Honduras': 8} // data passed through

HTML：

<div class="poll"> 
    <div class="poll_div"> 
    <h1><strong>Question?</strong></h1> 
    <form action="" method="post" class="poll_form"> <input type='hidden' name='csrfmiddlewaretoken' value='bMfVv1HAB9PcivrMZfP5dZddKCXt7xBCxv6WGHqpcw6cT1bNIfKjGPNIK74hGCkF' /> 


     <div class="poll_choice_div"> 

      <div class="poll_choice"> 
       <input type="radio" name="choice" id="choice1"/>Mexico<br> 
      </div> 

      <div class="poll_choice"> 
       <input type="radio" name="choice" id="choice2"/>Panama<br> 
      </div> 

      <div class="poll_choice"> 
       <input type="radio" name="choice" id="choice3"/>Honduras<br> 
      </div> 

     </div> 
     <input type="submit" value="Vote" /> 

    </form> 
    </div> 
    <div class="poll_results"> 

     <div class="choice_result" data-choice_percent="14"> 
      <p class="choice_result_text">Mexico</p> 
      <span>14%</span> 
     </div> 

     <div class="choice_result" data-choice_percent="24"> 
      <p class="choice_result_text">Panama</p> 
      <span>24%</span> 
     </div> 

     <div class="choice_result" data-choice_percent="60"> 
      <p class="choice_result_text">Honduras</p> 
      <span>60%</span> 
     </div> 

    <p class="total_votes">Total Votes: 0</p> 
    </div> 
</div>

的jQuery（AJAX調用）

$('.poll_form').on('submit', function(e) { 
    e.preventDefault(); 

    var $form = $(this); 

    ... 

    $.ajax({ 
     type: 'POST', 
     url: '/poll_answer/', 
     data: { 
      answer: choice, 
      question: question, 
      csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(), 
     }, 
     success: function (data) { 
      result = $form.parent().parent().find('.choice_result_text'); 
      choices = data.choices; // {the dictionary} 

      $('.choice_result').each(function() { // Add value to choice 
       var key = $(this).find('.choice_result_text').text(); 
       if (key in choices) { 
        $(this).find('.choice_result_text').next().text(choices[key] + '%'); 
        } 
      }).sort(function(a, b) { // Now sort them 
       return choices[$(b).find('.choice_result_text').text()] - choices[$(a).find('.choice_result_text').text()]; 
      }).appendTo('body'); 


      $('.total_votes').html('Total votes: ' + data.total_votes) 
     } 
    }) 


});

目前所做的是將span更改爲的val 0於choices。這工作正常，但我想根據val（按降序排列）對div進行排序。所以相反，div應該排序爲Mexico, Honduras, Panama。由於沒有辦法對dictionaries進行排序，我需要找到另一種方法來執行此操作。

來源

2017-02-14 Zorgan

鍵的對象文本的順序並不所以你需要以另一種方式定義順序（提示，使用一個數組） – Phil

這就是我所問的，有人使用這種方法，但使用數組。我嘗試了自己並奮鬥。 – Zorgan

你真的沒有改變choice字典，你可以排序的DOM元素本身。

排序的div基於價值和事後追加他們回到DOM - 看演示如下：

// data obtained from ajax call 
 
var choices = { 
 
    'Mexico': 53, 
 
    'Panama': 1, 
 
    'Honduras': 8 
 
} 
 

 
$('.poll').each(function() { 
 

 
    $(this).find('.choice_result').each(function() { // Add value to choice 
 
    var key = $(this).find('.choice_result_text').text(); 
 
    if (key in choices) { 
 
     $(this).find('.choice_result_text').next().text(choices[key] + '%'); 
 
    } 
 
    }).sort(function(a, b) { // Now sort them 
 
    return choices[$(b).find('.choice_result_text').text()] - choices[$(a).find('.choice_result_text').text()]; 
 
    }).appendTo($(this).find('.poll_results')); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="poll"> 
 
    <div class="poll_div"> 
 
    <h1><strong>Question?</strong></h1> 
 
    <form action="" method="post" class="poll_form"> 
 
     <input type='hidden' name='csrfmiddlewaretoken' value='bMfVv1HAB9PcivrMZfP5dZddKCXt7xBCxv6WGHqpcw6cT1bNIfKjGPNIK74hGCkF' /> 
 

 

 
     <div class="poll_choice_div"> 
 

 
     <div class="poll_choice"> 
 
      <input type="radio" name="choice" id="choice1" />Mexico 
 
      <br> 
 
     </div> 
 

 
     <div class="poll_choice"> 
 
      <input type="radio" name="choice" id="choice2" />Panama 
 
      <br> 
 
     </div> 
 

 
     <div class="poll_choice"> 
 
      <input type="radio" name="choice" id="choice3" />Honduras 
 
      <br> 
 
     </div> 
 

 
     </div> 
 
     <input type="submit" value="Vote" /> 
 

 
    </form> 
 
    </div> 
 
    <div class="poll_results"> 
 

 
    <div class="choice_result" data-choice_percent="14"> 
 
     <p class="choice_result_text">Mexico</p> 
 
     <span>14%</span> 
 
    </div> 
 

 
    <div class="choice_result" data-choice_percent="24"> 
 
     <p class="choice_result_text">Panama</p> 
 
     <span>24%</span> 
 
    </div> 
 

 
    <div class="choice_result" data-choice_percent="60"> 
 
     <p class="choice_result_text">Honduras</p> 
 
     <span>60%</span> 
 
    </div> 
 

 
    <p class="total_votes">Total Votes: 0</p> 
 
    </div> 
 
</div> 
 

 
<div class="poll"> 
 
    <div class="poll_div"> 
 
    <h1><strong>Question?</strong></h1> 
 
    <form action="" method="post" class="poll_form"> 
 
     <input type='hidden' name='csrfmiddlewaretoken' value='bMfVv1HAB9PcivrMZfP5dZddKCXt7xBCxv6WGHqpcw6cT1bNIfKjGPNIK74hGCkF' /> 
 

 

 
     <div class="poll_choice_div"> 
 

 
     <div class="poll_choice"> 
 
      <input type="radio" name="choice" id="choice1" />Mexico 
 
      <br> 
 
     </div> 
 

 
     <div class="poll_choice"> 
 
      <input type="radio" name="choice" id="choice2" />Panama 
 
      <br> 
 
     </div> 
 

 
     <div class="poll_choice"> 
 
      <input type="radio" name="choice" id="choice3" />Honduras 
 
      <br> 
 
     </div> 
 

 
     </div> 
 
     <input type="submit" value="Vote" /> 
 

 
    </form> 
 
    </div> 
 
    <div class="poll_results"> 
 

 
    <div class="choice_result" data-choice_percent="14"> 
 
     <p class="choice_result_text">Mexico</p> 
 
     <span>14%</span> 
 
    </div> 
 

 
    <div class="choice_result" data-choice_percent="24"> 
 
     <p class="choice_result_text">Panama</p> 
 
     <span>24%</span> 
 
    </div> 
 

 
    <div class="choice_result" data-choice_percent="60"> 
 
     <p class="choice_result_text">Honduras</p> 
 
     <span>60%</span> 
 
    </div> 
 

 
    <p class="total_votes">Total Votes: 0</p> 
 
    </div> 
 
</div>

來源

2017-02-14 06:18:30 kukkuz

@Zorgan讓我知道你對此的想法，謝謝！ – kukkuz

好，所以'$ .each（）'工作正常，但'.sort（）'出於某種原因會刪除所有的div ....如果我帶走'.appendTo（'body'），那麼它不會刪除它們 – Zorgan

該片段正常工作，您的實際HTML是不同的？ – kukkuz

你可以這樣做：

choices = {'Mexico': 53, 'Panama': 1, 'Honduras': 8}; 
 

 
sorted = Object.keys(choices).sort(); 
 

 
for (var place of sorted) 
 
    { 
 
    // do stuff 
 
    console.log(place, " number: ", choices[place]); 
 
    }

這樣做是獲取對象的鑰匙，把它們變成一個數組，然後您可以排序（將其放入的順序），然後使用有序的鍵來獲取你的值。

來源

2017-02-14 05:27:45

獲取'讓當前Javascript版本不支持當前Javascript定義的錯誤 – Zorgan

更改爲var，前面沒有任何東西可能會起作用 –

let choices = {'Mexico': 53, 'Panama': 1, 'Honduras': 8} // data passed through 
 
let arr = Object.keys(choices).map((k) => { 
 
    return { 
 
    place: k, 
 
    val: choices[k] 
 
    } 
 
}); 
 
arr.sort(function(a,b) { 
 
    return b.val - a.val; 
 
}); 
 

 

 
html = ''; 
 
arr.forEach((obj) => { 
 
    html += ` 
 
<div class="choice_result"> 
 
    <p class="choice_result_text">${obj.place}</p> 
 
    <span></span> 
 
</div> 
 
`; 
 
}); 
 
console.log(html);

來源

2017-02-14 05:40:41

回答

相關問題