Question

我正在为我的网站构建一个重复信息的表格，并使用图标控制，显示和隐藏各个部分。现在，对于硬编码实例，我可以使用以下内容：

  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".user">
       <i class="glyphicon glyphicon-chevron-down text-muted"></i>
   </div>

与以下div相关联：

 <div class="row user-infos user">
   .....table content
 </div>

所以，我的问题是，我如何为每次迭代指定一个唯一的数据属性。像这样：

<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".user1">
    <i class="glyphicon glyphicon-chevron-down text-muted"></i>
</div>
<div class="row user-infos user1">
   .....table content for user 1
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".user2">
    <i class="glyphicon glyphicon-chevron-down text-muted"></i>
</div>
<div class="row user-infos user2">
   .....table content for user 2
</div>
........

使用Jquery模板填充所有数据，因此我的变量格式为： $ {someValue中};

修改

应该注意我通过Ajax成功迭代我的数据集：

  $.each(msg.d, function(index, item) {
      $('#usertmpl').tmpl(item).appendTo('#results');
  });

和我的模板：

<script id="usertmpl" type="text/x-jquery-tmpl">
        <table class="table table-user-information" id="approveScroll" style="height: 100px;">
            <tbody>
                <tr>
                    <td>
                        <span><i class="glyphicon glyphicon-user"  data-toggle="tooltip" data-original-title="approved by"></i> ${UserName}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="approvedDate"><i class="glyphicon glyphicon-time" data-toggle="tooltip" data-original-title="approved date"></i> ${parseJsonDate(EnteredDate)}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="approveComment"><i class="glyphicon glyphicon-comment" data-toggle="tooltip" data-original-title="comment"></i> ${Comment}</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </script>

这一切都被附加到包含DIV。

修改 enter image description here

Answer 1

您可以使用${$index}之类的设计来设计唯一键

<script type="text/x-jquery-tmpl" id="jqTpl">
    {{each data.users}}
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 dropdown-user" data-for=".user${$index +1}">
      <i class="glyphicon glyphicon-chevron-down text-muted"></i>
    </div>
    <div class="row user-infos user${$index +1}">
         User${$index +1}
    </div>
    {{/each}}
</script>


<script type="text/javascript">
 var json={
     "data": {
         "users": [
             3,
             2,
             1
         ]
     }
 }   
</script>

用于在页面中显示此模板;

$( "#jqTpl" ).tmpl( json ).appendTo( "body" )

您可以在此处查看工作演示： http://jsfiddle.net/huseyinbabal/eQbvT/2/

在demo上，检查元素并查看类名是唯一的

更新：对于工具提示，请添加以下内容;

$('i[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
});

以下是工作演示： http://jsfiddle.net/huseyinbabal/eQbvT/1/

Jquery模板和数据

1 个答案: