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 相关文章推荐
javascript 自动转到命名锚记
Jan 10 Javascript
Javascript 学习书 推荐
Jun 13 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 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
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python连接mysql调用存储过程示例
2014/03/05 Python
Python动态加载模块的3种方法
2014/11/22 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
在Python中增加和插入元素的示例
2018/11/01 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
wxpython绘制音频效果
2019/11/18 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
工作自荐信
2013/12/11 职场文书
先进个人获奖感言
2014/01/24 职场文书
机关作风建设自查报告
2014/10/22 职场文书
个人学习总结范文
2015/02/15 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
详解python字符串驻留技术
2021/05/21 Python
element多个表单校验的实现
2021/05/27 Javascript