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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
浅析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提取中文首字母
2008/04/09 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
快速了解Python相对导入
2018/01/12 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python中return self的用法详解
2018/07/27 Python
Python类的继承用法示例
2019/01/31 Python
python3.x实现base64加密和解密
2019/03/28 Python
Python字典dict常用方法函数实例
2020/11/09 Python
中学生期中自我鉴定
2014/04/20 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
入团介绍人意见范文
2015/06/04 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis