Javascript 尝试根据传递的数据中的值对动态呈现的div进行排序

我有一个这样的

dict

：

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

HTML:

当前所做的是将

选项中的
键的
span
更改为
val
。这很好，但我想根据
val
（按降序）对div进行排序。因此，div应该被分类为墨西哥、洪都拉斯、巴拿马。由于没有办法对
词典进行排序，我需要找到另一种方法
 你可以做：


choices={‘墨西哥’：53，‘巴拿马’：1，‘洪都拉斯’：8}；
排序=Object.keys（choices）.sort（）；
for（已排序的变量位置）
{
//做事
日志（位置，“编号：”，选项[place]）；
}
let choices={'Mexico'：53，'Panama'：1，'Honduras'：8}//传递的数据
设arr=Object.keys（choices）.map（（k）=>{
返回{
地点:k,，
val:choices[k]
}
});
arr.sort（函数（a，b）{
返回b.val-a.val；
});
html=''；
arr.forEach（（obj）=>{
html+=`
${obj.place}
`;
});
log（html）
您实际上不必更改
选项
字典，您可以对DOM元素本身进行排序

根据值对div进行排序，然后将其追加回DOM中-请参见下面的演示：


//从ajax调用获取的数据
变量选择={
“墨西哥”：53岁，
"巴拿马":1,，
“洪都拉斯”：8
}
$（'.poll'）。每个（函数（）{
$（this）.find（'.choice_result'）.each（function（）{//为选项添加值
var key=$（this.find（'.choice_result_text'）.text（）；
如果（输入选项）{
$（this）.find（'.choice_result_text'）.next（）.text（选项[key]+'%'）；
}
}).sort（函数（a，b）{//现在对它们进行排序
返回选项[$（b）.find（'.choice_result_text'）.text（）]-选项[$（a）.find（'.choice_result_text'）.text（）]；
}).appendTo（$（this）.find（'.poll_results'）；
});

问题？
墨西哥


巴拿马


洪都拉斯


墨西哥

14%
巴拿马

24%
洪都拉斯

60%
投票总数：0

问题？
墨西哥


巴拿马


洪都拉斯


墨西哥

14%
巴拿马

24%
洪都拉斯

60%
投票总数：0

对象文本中键的顺序没有定义，因此您需要用另一种方式（提示，使用数组）来定义顺序，这正是我所要求的，让某人使用相同的方法，但改用数组。我自己也试过了，但是现在的Javascript版本不支持使用
Let定义。错误将其更改为var，前面没有任何内容可能会正常工作，因此
$。each（）
可以正常工作，但是
.sort（）
出于某种原因会删除所有div…如果我去掉“.appendTo”（'body'）那么它不会删除它们代码段工作正常，您的实际HTML不同？是的，我会发布实际的HTMLhtml@Zorgan查看编辑后的答案-更改在
.appendTo（'.poll_results'）
@Zorgan为
.poll
添加了另一个
each（）
，并相应地编辑了jquery…猜这就是你一直在做的吗？
<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>

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


});