在车把脚本中将类添加到 <tr>

Question

有没有一种简单的方法可以将 class 添加到把手脚本中的 table 行？

现在我正在遍历 JSON 并希望将页码 class 添加到所有行

for (var i = 0; i < allData.length; i++) {

        if (i % 10 == 0 && i != 0) {
            pageNumber++;                             
        }
        $('.tableRow').addClass('page' + pageNumber);
        console.log("page" + pageNumber);
    }

.table行是 <tr> 我的把手脚本

一切正常，但我无法添加 class。如果我尝试在我的脚本

之外附加到 class 它工作正常

HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" type="text/css" media="screen" href="/includes/css/style.css" />
</head>
<body>
    <div class="wrapper">
        <div class="tab-container">

            <div class="tab-content">

                <div id="scriptData"></div>


                <script id="template" type="text/x-handlebars-template">


                        <table class="table-look">
                            <thead>
                                <tr>
                                    <th class="Header">Some data</th>
                                    <th class="Header">Some data</th>
                                    <th class="Header">Some data</th>
                                    <th class="Header">Some data</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{#each this}}
                                <tr class="tableRow">
                                    <td">{{data}}</td>
                                    <td>{{data}}</td>
                                    <td>{{data}}</td>
                    <td>{{data}}</td>                               
                                </tr>
                    {{/each}} 
                            </tbody>                           
                        </table>
                </script>

            </div>
        </div>
    </div>

    <script type="text/javascript" src="includes/js/libs/jquery-1.11.3.min.js"></script>
    <script src="includes/js/libs/handlebars-v4.0.2.js"></script>
    <script type="text/javascript" src="includes/js/custom.js"></script>
</body>
</html>

Answer 1

试试这个

$(document).ready(function(){
   $(".table-look tr").each(function(index,row){
       // add your class here
       $(row).addClass("yourClass");
   });
});

Answer 2

我看到 HandlebarJS 有一些使用，但我自己从未使用过它 - 所以这似乎是一个掌握它的好机会。

jQuery 不会选择 <script id="..." type="text/x-handlebars-template"> 内的任何元素。您没有任何 DOM 元素可供 jQuery 使用 - 您只有一些文本。这有点令人困惑，因为它 看起来 像普通的 HTML 元素 - 但它只是文本。这是一个脚本。

您有 2 个选项 - 您可以：

答：在呈现模板后遍历 DOM 元素。
B：使用 Handlebar 的 Block Expressions

选项A：

$(document).ready(function () {
    var source = $("#template").html();
    var template = Handlebars.compile(source);
    var html = template(context);
    $('#foo').html(html);
    $('.tableRow').each(function(idx,o){
        $(this).addClass('page'+Math.floor(idx/2));
    });
});

http://jsfiddle.net/daveSalomon/xzey0dnj/3/

选项 B：

模板

<tr class = "tableRow {{#page-number}}page{{/page-number}}">

JS

var fooItemNumber = 0;
Handlebars.registerHelper('page-number', function(items, options) {
    var out = "page";
    return out + Math.floor(fooItemNumber++/2);
});

http://jsfiddle.net/daveSalomon/xzey0dnj/5/

在车把脚本中将类添加到 <tr>

addClass to <tr> in handlebar script

javascript

jquery

handlebars.js

addclass