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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
js切换光标示例代码
Oct 10 Javascript
AngularJS内置指令
Feb 04 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
浅析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 数组二分法查找函数代码
2010/02/16 PHP
php笔记之常用文件操作
2010/10/12 PHP
php使用google地图应用实例
2014/12/31 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
python异常处理try except过程解析
2020/02/03 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
个人借款担保书
2014/04/02 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
golang 实用库gotable的具体使用
2021/07/01 Golang
索尼ICF-5900W收音机测评
2022/04/24 无线电
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS