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 定时器
Dec 23 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
微信小程序实现搜索功能
Mar 10 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
文章推荐系统(三)
2006/10/09 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
Python单链表简单实现代码
2016/04/27 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
python写程序统计词频的方法
2019/07/29 Python
python sqlite的Row对象操作示例
2019/09/11 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
python中温度单位转换的实例方法
2020/12/27 Python
Python实现简单猜数字游戏
2021/02/03 Python
android面试问题与答案
2016/12/27 面试题
教师找工作推荐信
2013/11/23 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
幸福终点站观后感
2015/06/04 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
工作感言一句话
2015/08/01 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书