• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery教程 $()包装函数来实现数组元素分页效果

jQuery教程 $()包装函数来实现数组元素分页效果

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了$(),数组元素,分页等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

最近一周在做中文站搜索礼品widget的需求,这个需求中有一个分页的功能;具体demo可以参见下图:

\

对应的js应用文件是同一个,页面中后面的offer数据已经埋好了,只是启用了css display:none样式把后面的offer元素隐藏了。现在要求对已存在的页面元素实现上下分页效果,也就是页面元素总集可以通过$(.class)获得,然后来实现分页功能。

按照传统的一般做法,用jQuery可写成如下:

大家发现没有,在向后翻页的代码中,无论最后一页只有1条offer,2条offer,还是全部3条offer,我都用同样的代码,不做任何判断

这3条语句连续调用。

也就是说,elemIndex有可能越界,即elemIndex>$(.class).length,即使在这样的情况下,$(.class).eq(elemIndex+1).css('display',")照样没有问题,浏览器不会报错,js照常执行,最终结果照样能完美展示。这要感谢jQuery的包装函数产生的juery对象,如果elemIndex>=$(.class).length,$(.class).eq(elemIndex+1)返回的是一个空jquery元素对象,虽然它没有对应到DOM中的元素,但它还是一个jQuery对象,因此调用.css()方法不会出错,虽然页面没有任何变化效果;

通过这个例子,就能够理解为什么jQuey对不匹配的元素仍然返回jQuery Object,而不是null,这种思想对数组分页操作来说,提供了极大的便利性,因为避免了数组索引越界引起程序错误,导致js中断执行的情况,简化了分页代码中大量的数组索引越界判断。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • $.each与$().each的区别示例介绍
  • jQuery教程 $()包装函数来实现数组元素分页效果
  • jQuery的三种$()
  • JQuery Tips(3) 关于$()包装集内元素的改变
  • JQuery Tips(2) 关于$()包装集你不知道的

相关文章

  • 2017-08-16Enter回车切换输入焦点实现思路与代码兼容各大浏览器
  • 2017-08-16用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
  • 2017-08-16jQuery居中元素scrollleft计算方法示例
  • 2017-08-16jQuery功能函数详解
  • 2017-08-16jQuery获取this当前对象子元素对象的方法
  • 2017-08-16关于jQuery UI 使用心得及技巧
  • 2017-08-16jquery插件冲突(jquery.noconflict)解决方法分享
  • 2017-08-16jQuery.holdReady()使用方法
  • 2017-08-16jquery创建一个新的节点对象(自定义结构/内容)的好方法
  • 2017-08-16QUnit jQuery的TDD框架

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 浅谈jQuery事件绑定原理
    • 基于jQuery实现多标签页切换的效果(web前端开发)
    • jquery ready函数源代码研究
    • jquery(1.3.2) 高亮选中图片边框
    • Jquery实现纵向横向菜单
    • 修改jquery中dialog的title属性方法(推荐)
    • jQuery Easyui实现左右布局
    • JQury Ajax使用Token验证身份
    • jquery 多级下拉菜单核心代码
    • 探讨JQUERY JSON的反序列化类 using问题的解决方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有