Question

我有一个类似

的数组

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>

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

        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];
        }

Answer 1

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

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

你的脚本在这里：

(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);

})();

Answer 2

尝试

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])
});

＆＃13;

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])
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                    <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>

＆＃13;

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

2 个答案: