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
JS中获取数据库中的值的方法
Jul 14 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
JS交换变量的方法
2015/01/21 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
layui获取多选框中的值方法
2018/08/15 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
用python写爬虫简单吗
2020/07/28 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
LINUX下线程,GDI类的解释
2012/04/17 面试题
本科毕业生求职自荐信
2014/04/09 职场文书
人民调解员培训方案
2014/06/05 职场文书
2015年酒店工作总结
2015/04/28 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书