Javascript 正确的JQuery过程可以执行以下操作

我有一个类似的数组

var highScoreArr = [["Dummy1","10"], ["Dummy2", "10"], ["Dummy3", "40"], ["Dummy4", "80"], ["Dummy5", "60"]];

我想把这些信息放到一个HTML结构中，比如

                    <div id="snake-high-scores">
                            <p><b>High Scores:</b></p>
                        <div class="snake-high-score-row">
                            <p>Name: <span class="user-name">[player]</span></p>
                            <p>Score: <span class="user-score">100</span></p>
                        </div>
                        <div class="snake-high-score-row">
                            <p>Name: <span class="user-name">[player]</span></p>
                            <p>Score: <span class="user-score">90</span></p>
                        </div>
                        <div class="snake-high-score-row">
                            <p>Name: <span class="user-name">[player]</span></p>
                            <p>Score: <span class="user-score">80</span></p>
                        </div>
                        <div class="snake-high-score-row">
                            <p>Name: <span class="user-name">[player]</span></p>
                            <p>Score: <span class="user-score">70</span></p>
                        </div>
                        <div class="snake-high-score-row">
                            <p>Name: <span class="user-name">[player]</span></p>
                            <p>Score: <span class="user-score">60</span></p>
                        </div>
                    </div> 

高分：

姓名：[玩家]

分数：100

姓名：[玩家]

分数：90

姓名：[玩家]

分数：80

姓名：[玩家]

分数：70

姓名：[玩家]

分数：60

正确的方法是什么？我想要紧凑、性能和优雅的最佳组合。现在我有了懒惰的解决方案

        var names = $('div.snake-high-score-row span.user-name'); 
        var scores = $('div.snake-high-score-row span.user-score');
        for (var i = 0, j = names.length; i < j; ++i)
        {
            names[i].innerText = highScoreArr[i][0];
            scores[i].innerText = highScoreArr[i][1];
        }

var name=$（'div.snake-high-score-row span.user name'）；
var得分=$（'div.snake-high-score-row span.user score'）；
对于（变量i=0，j=names.length；i

您的方法也很好，但如果您找到更好的方法，请尝试以下操作：

<div id="snake-high-scores">
    <p><b>High Scores:</b></p>
        <div class="template-inner">

            <script id="scoreTemplate" type="score/template">
                <div class="snake-high-score-row">
                    <p>Name: <span class="user-name">{{player}}</span></p>
                    <p>Score: <span class="user-score">{{score}}</span></p>
                </div>
            </script>

    </div>
</div>

试一试

var highScoreArr=[
[“Dummy1”，“10”]
，[“Dummy2”，“10”]
，[“Dummy3”，“40”]
，[“Dummy4”，“80”]
，[“Dummy5”，“60”]
]
，sortScores=highScoreArr.sort（函数（a，b）{
返回b[1]-a[1]
})
，分数=$（“#蛇高分数[班级^=蛇高]”；
分数。每个（功能（i，el）{
$（el）.find（“p[class^=user]”）.eq（0）.text（sortScores[i][0]）
.addBack（）.eq（1）.text（sortScores[i][1]）
});

高分：

姓名：[玩家]

分数：100

姓名：[玩家]

分数：90

姓名：[玩家]

分数：80

姓名：[玩家]

分数：70

姓名：[玩家]

分数：60


(function() {
        var highScoreArr = [["Dummy1","10"], ["Dummy2", "10"], ["Dummy3", "40"], ["Dummy4", "80"], ["Dummy5", "60"]],
                template = $.trim( $('#scoreTemplate').html() ),
                chunk = '';



        $.each( highScoreArr, function( index, obj ) {
                chunk +=
                        template.replace( /{{player}}/ig, obj[0] )
                                        .replace( /{{score}}/ig, obj[1] );      
        });

        $('.template-inner').append(chunk);

})();

var highScoreArr = [
                     ["Dummy1","10"]
                   , ["Dummy2", "10"]
                   , ["Dummy3", "40"]
                   , ["Dummy4", "80"]
                   , ["Dummy5", "60"]
                   ]

, sortScores = highScoreArr.sort(function(a, b) {
  return b[1] - a[1]
})

, scores = $("#snake-high-scores [class^=snake-high]");

scores.each(function(i, el) {
    $(el).find("p [class^=user]").eq(0).text(sortScores[i][0])
    .addBack().eq(1).text(sortScores[i][1])
});