jquery tmpl遍历

jquery tmpl遍历最近,发现大家喜欢用模板渲染一些DOM,而且常常用模板嵌套一些逻辑,看了大家用jquerytmpl较多,遇到的问题大同小异。为了避免问题重复发生,现在就个人用过的一些常用功能,作下具体介绍,主要针对遍历。其它的大家可自行看看网上教程,推荐一个:jqueryTmpl,希望对大家有所帮助1.普通数组对象的遍历,关键词{{eachArray}}、$value、$index数据格式:varperso

大家好,又见面了,我是你们的朋友全栈君。

最近,发现大家喜欢用模板渲染一些DOM,而且常常用模板嵌套一些逻辑,看了大家用jquery tmpl较多,遇到的问题大同小异。为了避免问题重复发生,现在就个人用过的一些常用功能,作下具体介绍,主要针对遍历。其它的大家可自行看看网上教程,推荐一个:jquery Tmpl,希望对大家有所帮助

1.普通数组对象的遍历,关键词{
{each Array}}
$value$index

数据格式:

var person = [
	{
		'name':'Tom',
		'age':18,
		'location':[
			{'pro':'安徽省'},
			{'pro':'六安市'},
			{'pro':'舒城县'}
		]
	},
  {
	  'name':'Jack',
	  'age':19, 
	  'location':[ 
			{'pro':'安徽省'},
			{'pro':'合肥市'}, 
		]
	}
];

模板定义:(注意scritpt标签type指定

<script id="myTemp" type="text/x-jquery-tmpl">
  <li class="li">
    <span class="a" title='${name}'>${name}</span>
    <span class="b" title='${age}'>{
  
  {= name}}</span>
    <span class="c" title='location'>
      {
  
  {each location}}
        ${$index+1}:${$value.pro}
      {
  
  {/each}}
    </span>
  </li>
</script>

html:

<ul id="ul_temp"></ul>

调用:(注意两个选择器代表什么)

$("#myTemp").tmpl(person).appendTo("#ul_temp");

打印效果:

Tom Tom 1:安徽省 2:六安市 3:舒城县
Jack Jack 1:安徽省 2:合肥市 3:蜀山区

上例中,{
{each}}
表示表里一个数组对象,而不是对象。$index表示当前遍历的索引值,$value表示当前遍历与索引对应的值(注意:是对应值,说明可能是个对象)。这里容易出错打印成[Object Object],原因你把对象的引用打印出来了

2.对象的属性的遍历

将上例数据源更改如下:

var person1 = {
  'name':'Tomson',
  'relation':'son',
  'family':[{
      'name':'Tom',
      'relation':'father'
    },{
      'name':'Monica',
      'relation':'mother'
    }]
}

模板更改如下:

<script id="myTemp" type="text/x-jquery-tmpl">
<span class="a" title='${name}'>${name}</span>
<span class="b" title='{
  
  { =relation}}'>
  <ul>
    {
  
  {each(i,data) family}}
      <li class="li">
        ${data.relation}:${data.name}
      </li>
    {
  
  {/each}}
  </ul>
</span>
</script>

打印效果:

Tomson
father:Tom
mother:Monica

{
{each(i,data) Array}}
类似jquery eachi表示索引,data表索引对象的当前对象。通过对象.访问遍历属性,中间嵌入{
{if}}可实现逻辑操作

将上处模板更改如下:

   {
  
  {each(i) family}}
    <li class="li">
      ${family[i].relation}:${family[i].name}
    </li>
  {
  
  {/each}}

可获取指定数组元素的值,当然也可以强制指定访问某个值。

就这么多了,另外常用还有${data}获取数据源值等,有问题的可以私下交流

❤️❤️❤️❤️❤️❤️❤️❤️❤️ 如果对您有用,一分一块都是爱 ❤️❤️❤️❤️❤️❤️❤️❤️❤️

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148365.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • c#数组赋初值_C#数组初始化

    c#数组赋初值_C#数组初始化C#的数组初始化是在声明数组时将初始值放在大括号({})之内。如果没有指定初始值,则数组成员将自动初始化为该数组类型的默认初始值。请阅读数组的属性。如果将数组声明为某类型的字段,则当实例化该类型时它将被设置为默认值null。一、一维数组的初始化1.在声明数组时将其初始化。如:int[]array=newint[6]{1,2,3,4,5,6};string[]stringArray=…

  • linux开放8080端口命令_centos开放80端口

    linux开放8080端口命令_centos开放80端口1.添加映射iptables-tnat-APREROUTING-ptcp–dport80-jREDIRECT–to-port8080-tnat:指出我要操作什么表.(不写就表示filter.默认是filter)-APREROUTING:A添加的意思.表示我要在PREROUTING中添加一个规则–dport80:如果请求80端…

  • Windows API——CFile, read, write,typeBinary函数「建议收藏」

    Windows API——CFile, read, write,typeBinary函数「建议收藏」文件操作API和CFile类在VC中,操作文件的方法有两种,一是利用一些API函数来创建,打开,读写文件,另外一个是利用MFC的CFile类,CFile封装了对文件的一般操作。下面酒主要介绍如何利用这两种方法操作文件。1.创建或打开一个文件API函数CreateFile可打开和创建文件、管道、邮槽、通信服务、设备以及控制台,但是在此时只是介绍用这个函数怎么实现创建和打开一个文件。HANDL…

  • 台式计算机网线接口松动怎么办,台式电脑网卡坏了怎么修复(图文)「建议收藏」

    台式计算机网线接口松动怎么办,台式电脑网卡坏了怎么修复(图文)「建议收藏」电脑网卡要是坏了,就无法正常上网。网卡对于主机的网络连接来说非常重要,遇到网卡坏了连接不上网络很麻烦,如果重新安装一个或者是拿去修又成本高。有什么好办法可以怎么修复?大家可以参考下文操作。具体方法如下:1、如下图,为电脑网卡外口,即为插网线的地方。2、同事的网卡坏了,没有专业工具,没有配件,怎么办?一些质量差点的网卡或者网卡用的时间长了,里面的金属触片很容易失去弹性。引发接触不良,这时候一种最简单…

  • CTK Plugin Framework 介绍「建议收藏」

    CTK Plugin Framework 介绍「建议收藏」CTKPluginFramework基本原理1 CTKPluginFramework是什么&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CTKPluginFramework技术是面向C++的动态模型系统。该系统允许插件之间的松散耦合,并且提供了设计良好的方式来进行功能和数据的交互。此外,它没有预先对插件施加限制,这样就可以很…

  • 惠普笔记本电脑自动关机是什么原因_台式老电脑经常自动关机怎么办

    惠普笔记本电脑自动关机是什么原因_台式老电脑经常自动关机怎么办运行台式惠普win7系统电脑时总会碰到各种故障问题,这不一位用户说电脑总是自动关机,怎么回事?造成电脑自动关机的原因有很多,我们要根据具体故障原因来解决,下面小编告诉大家台式惠普电脑总是自动关机的三种原因及解决方法。惠普电脑总是自动关机的解决方法一:1、首先检查是不是硬件问题造成的电脑突然关机,如果你不懂硬件设备,建议您拿到专业电脑维修点进行维修检查,请不要乱拆否则硬件设备严重损坏。2、在检查电脑…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号