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中通过URL传递汉字的方法
Apr 09 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
JavaScript中的Function函数
Aug 27 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
js实现表格数据搜索
Aug 09 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 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计算页面执行时间的实现代码
2013/06/18 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
jquery动态改变form属性提交表单
2014/06/03 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
移动端js图片查看器
2016/11/17 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python 文件管理实例详解
2015/11/10 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python实现中值滤波去噪方式
2019/12/18 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
python中可以声明变量类型吗
2020/06/18 Python
浅谈Python中的继承
2020/06/19 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
实习医生自我评价
2013/09/22 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
教师产假请假条范文
2014/04/10 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
庆祝国庆节标语
2014/10/09 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技