jQuery 中$(this).index與$.each的使用指南
工作當中響應某個需求,切換選項卡的一個效果,根據每個選項下的內容元素的總數不同而進行不同的html變化(如果選項卡下的內容為空就等于XXX,否則就XXX)
$(function(){
$(".bao").hide();
$(".bao").eq(0).show();
$(".head li").click(function(){
$(this).addClass('cur').siblings().removeClass("cur");
$(".bao").eq($(this).index()).show().siblings(".bao").hide()
var a=$(".bao").eq($(this).index()).find('li')
if(a.length<0){
alert("我小于0啊!!")
}
});
function moren(){
var moren=$(".moren").find('li')
if(moren.length==0){
alert("我是空的~沒戲")
}
}
})
先聲明 選項卡的頭部就叫頭部
選項卡的內容就叫內容啊~
想到的第一種方法(笨方法):
綁定添加了click事件。當切換頭部的時候執(zhí)行.頭部根據自己的索引獲得相對應的內容,在遍歷到內容下的li元素,就獲得每個頭部相對應的內容下的總個數。
因為說,這是click事情后發(fā)現的事,但是忽略了頭部的第一個元素,我要它在瀏覽器的刷新的時候就開始執(zhí)行,所以我為頭部的第一個元素增加多了一個class類 在對這個class類進行判斷。最后~
就得到我想要的效果。當個數==0||!==0的時候就執(zhí)行我所要的。
但是考慮到。后面可能會出現一切我所預料不到的事,我不要它在我點擊的時候在執(zhí)行,我要在瀏覽器刷新后加載后就幫我執(zhí)行。所以小菜鳥我又苦逼的湊出一種方法
另外的一種方法 感覺這樣比較好~:
$(function(){
$(".bao").hide();
$(".bao").eq(0).show();
$(".head li").click(function(){
$(this).addClass('cur').siblings().removeClass("cur");
$(".bao").eq($(this).index()).show().siblings(".bao").hide()
});
var aaa= $(".bao ul")
aaa.each(function(){
var b=$(this).children('li').length
alert(b)
if(b==0){
$(this).append("<div>我是0個之后增加上去的</div>")
}
})
})
這種方法用了$.each()
比較方便吧,目前來說得到我想要的結果。$.each()遍歷出每個內容元素,然后在獲取內容自己下面的li元素的總數 就可以判斷后得到我想要的效果
- jquery選擇器排除某個DOM元素的方法(實例演示)
- jQuery過濾選擇器:not()方法使用介紹
- jQuery獲取復選框被選中數量及判斷選擇值的方法詳解
- jQuery選擇id屬性帶有點符號元素的方法
- jQuery選擇器總結之常用元素查找方法
- JQuery 選擇和過濾方法代碼總結
- JQuery的常用選擇器、過濾器、方法全面介紹
- jquery $(this).attr $(this).val方法使用介紹
- 詳談jQuery中的this和$(this)
- jQuery中$this和$(this)的區(qū)別介紹(一看就懂)
- JQuery this 和 $(this) 的區(qū)別
- jQuery 選擇方法及$(this)用法實例分析
相關文章
QRCode.js:基于JQuery的生成二維碼JS庫的使用
本篇文章主要介紹了QRCode.js:基于JQuery的生成二維碼JS庫的使用,具有一定的參考價值,有興趣的同學可以了解一下2017-06-06ASP.NET中基于JQUERY的高性能的TreeView補充
根據 假正經哥哥 的博客整理,我第一次使用的另外的TREEVIEW,可是 做出來的效果 太卡,不知道什么原因。這次用的假正經哥哥的這篇文章。2011-02-02兩個select之間option的互相添加操作(jquery實現)
兩個select,將其中一個select選中的選項添加到另一個select中,或者點擊全部添加按鈕將所有的option都添加過去.2009-11-11