jquery <li>標(biāo)簽隔若干行加空白或者加虛線的方法

更新時間：2016年12月07日 11:05:51 投稿：jingxian

下面小編就為大家?guī)硪黄猨query <li>標(biāo)簽隔若干行加空白或者加虛線的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

實例如下：

$(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 li標(biāo)簽隔若干行加空白或者加虛線的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Jquery和JS獲取ul中l(wèi)i標(biāo)簽的實現(xiàn)方法

相關(guān)文章

jquery統(tǒng)計用戶選中的復(fù)選框的個數(shù)
使用選擇器得到所有被勾選的復(fù)選框元素的集合，然后通過判斷元素的個數(shù)來得到用戶勾選的個數(shù),需要的朋友可以參考下
2014-06-06
寫得不錯的jquery table鼠標(biāo)經(jīng)過變色代碼
鼠標(biāo)經(jīng)過table變色的效果，想必大家都有遇到過吧，其實實現(xiàn)并不難，在本文為大家詳細介紹下jquery是如何實現(xiàn)的，感興趣的朋友可以參看下
2013-09-09
jquery實現(xiàn)圖片漸變切換兼容ie6/Chrome/Firefox
jquery代碼實現(xiàn)圖片漸變切換同時兼容ie6、Chrome、Firefox，想學(xué)習(xí)的朋友可以測試下，希望對大家有所幫助
2013-08-08
jQuery 復(fù)合選擇器應(yīng)用的幾個例子
這篇文章主要介紹了jQuery 復(fù)合選擇器應(yīng)用的幾個例子,本文例子所引用的jQuery版本為 jQuery-1.8.3.min.js，喜歡的朋友可以學(xué)習(xí)下
2014-09-09
jquery實現(xiàn)下拉框左右選擇功能
本文主要介紹了jquery實現(xiàn)下拉框左右選擇功能的方法，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
jquery關(guān)于頁面焦點的定位(文本框獲取焦點時改變樣式 )
用戶在輸入文字時，如果能高亮顯示正在輸入的那個文本框的話，會更人性化些，下面就使用jQuery來實現(xiàn)。
2010-09-09
jQuery得到多個值只能用取Class ,不能用取ID的方法
下面小編就為大家?guī)硪黄猨Query得到多個值只能用取Class ,不能用取ID的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-12-12
jQuery驗證插件validate使用方法詳解
這篇文章主要為大家詳細介紹了jQuery驗證插件validate使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
使用jquery+iframe做一個ajax上傳效果(實例)
下面小編就為大家?guī)硪黄褂胘query+iframe做一個ajax上傳效果(實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
推薦40個簡單的 jQuery 導(dǎo)航插件和教程(下篇)
在下面的集合中，你會發(fā)現(xiàn)很多便利的 jQuery 導(dǎo)航插件和有用的教程，幫助你實現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航，讓你網(wǎng)站更有組織性和交互性
2012-09-09