使用 jquery 在不同的表中显示对象的元素？答案

【问题标题】：To show the elements of an object in differrent tables using jquery?使用 jquery 在不同的表中显示对象的元素？
【发布时间】：2015-03-03 10:21:48
【问题描述】：

这是我的 jsrender html

<script id="pageDetails1" type="text/x-jsrender">
    <tr>
        <td class="hidden-xs">{{>pageName}}</td>
        <td class="hidden-xs">{{>pageCount}}</td>
    </tr>
</script>
<script id="pageDetails2" type="text/x-jsrender">
    <tr>
        <td class="hidden-xs">{{>pageName}}</td>
        <td class="hidden-xs">{{>pageCount}}</td>
    </tr>
</script>
<script id="pageDetails3" type="text/x-jsrender">
    <tr>
        <td class="hidden-xs">{{>pageName}}</td>
        <td class="hidden-xs">{{>pageCount}}</td>
    </tr>
</script>

这是 html 表格 ID，我在其中插入模板

<tbody id="pageDetails-1"></tbody>
<tbody id="pageDetails-2"></tbody>
<tbody id="pageDetails-3"></tbody>

这是我用来将名为“tdaPages”的数组推送到这些 id 的 jquery 代码。

$("#pageDetails-1").html($("#pageDetails1").render(tdaPages));
$("#pageDetails-2").html($("#pageDetails2").render(tdaPages));
$("#pageDetails-3").html($("#pageDetails3").render(tdaPages));

我想要什么：就是获取pageDetails1中的前10个元素的id，然后是pageDetails2中的后10个，然后pageDetails3中的后10个元素。

我得到了什么：它对所有人显示相同的值。即 pageDetails1,pageDetails2,pageDetails3 显示相同的元素。

谁能建议如何解决这个问题？

【问题讨论】：

一个名为“tdaPages”的数组是的，对所有人来说都是一样的。
使用 #index 检查不同 pageDetails 部分的计数器

标签： javascript jquery html jsrender

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="jsrender.js" type="text/javascript"></script>
    <script type="text/javascript">
        var tdaPages = [
            { pageName: "One", pageCount: "1"},
            { pageName: "Two", pageCount: "2"},
            { pageName: "Three", pageCount: "3"},
            { pageName: "Four", pageCount: "4"},
            { pageName: "Five", pageCount: "5"},
            { pageName: "Six", pageCount: "6"},
            { pageName: "Seven", pageCount: "7"},
            { pageName: "Eight", pageCount: "8"},
            { pageName: "Nine", pageCount: "9"}
        ];
    </script>
</head>
<body>
    <table id="pageDetails-1"></table>
    <table id="pageDetails-2"></table>
    <table id="pageDetails-3"></table>

    <script id="pageDetails1" type="text/x-jsrender">
    {{if #index < 3}}
        <tr>
            <td class="hidden-xs">{{>pageName}}</td>
            <td class="hidden-xs">{{>pageCount}}</td>
        </tr>
    {{/if}}
    </script> 
    <script id="pageDetails2" type="text/x-jsrender">
    {{if #index > 2 && #index < 6 }}
        <tr>
            <td class="hidden-xs">{{>pageName}}</td>
            <td class="hidden-xs">{{>pageCount}}</td>
        </tr>
    {{/if}}
    </script> 
    <script id="pageDetails3" type="text/x-jsrender">   
    {{if #index > 5 && #index < 9 }}
        <tr>
            <td class="hidden-xs">{{>pageName}}</td>
            <td class="hidden-xs">{{>pageCount}}</td>
        </tr>
    {{/if}}
    </script>

    <script type="text/javascript">
        $("#pageDetails-1").html($("#pageDetails1").render(tdaPages));
        $("#pageDetails-2").html($("#pageDetails2").render(tdaPages));
        $("#pageDetails-3").html($("#pageDetails3").render(tdaPages));
    </script>
</body>
</html>

【讨论】：