jquery 标签 隔若干行加空白或者加虚线的方法


Posted in Javascript onDecember 07, 2016

实例如下:

$(function () {
$('ul li').addClass(function (i) { return i % 6 == 5 ? "ab" : ""; });  // 隔6行 加空白。或者加虚线


$('.imglist li').after(function (i) {
var css = "";
if (i % 3 == 2) {
css = "<div class='dashed clear' ></div>";
}
return css;
}); //图片列表photo.html 隔3行 虚线

});

i 是 <li>的索引号,从0开始

图片隔三行加虚线,最后一行去掉虚线,还可以这样

//方法一:
  jQuery(document).ready(function () {
    var NewUL = jQuery(".photo_list ul li");
    for (var i = 0; i < NewUL.length; i++) {
      if ((i + 1) % 3 == 0) {
        NewUL.eq(i).after("<li class=\"photo_space\"></li>");
      }
    }
    $(".photo_list li:last").css("border-bottom", "none");
  })
.ab

{

height:80px;

}
.dashed{border-bottom:1px dashed #b9c3c7;padding-bottom:10px;margin-bottom:10px}
.clear{clear:both}
.imglist ul li {text-align:center;line-height:25px;float:left}

 jquery 标签 隔若干行加空白或者加虚线的方法

jquery 标签 隔若干行加空白或者加虚线的方法

以上这篇jquery li标签 隔若干行加空白或者加虚线的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
浅析js的模块化编写 require.js
Dec 07 #Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 #Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 #Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 #Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 #Javascript
jquery插入兄弟节点的操作方法
Dec 07 #Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 #Javascript
You might like
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
puppeteer库入门初探
2019/01/09 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python打开使用的方法
2019/09/30 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
全球度假村:Club Med
2017/11/27 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
行政经理岗位职责
2013/11/09 职场文书
事假请假条范文
2014/04/11 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
苏州园林导游词
2015/02/03 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL