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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
JS变量提升及函数提升实例解析
Sep 03 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音乐采集(部分代码)
2007/02/14 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
tagName的使用,留一笔
2006/06/26 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
JS实现鼠标移动拖尾
2020/12/27 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
python正则表达式match和search用法实例
2015/03/26 Python
python定向爬取淘宝商品价格
2018/02/27 Python
python 图片去噪的方法示例
2019/07/09 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
人事档案接收函
2014/01/12 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
学校献爱心活动总结
2014/07/08 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
体育委员竞选稿
2015/11/21 职场文书