jQuery 中$(this).index與$.each的使用指南
工作當(dāng)中響應(yīng)某個需求,切換選項卡的一個效果,根據(jù)每個選項下的內(nèi)容元素的總數(shù)不同而進行不同的html變化(如果選項卡下的內(nèi)容為空就等于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("我是空的~沒戲")
}
}
})
先聲明 選項卡的頭部就叫頭部
選項卡的內(nèi)容就叫內(nèi)容啊~
想到的第一種方法(笨方法):
綁定添加了click事件。當(dāng)切換頭部的時候執(zhí)行.頭部根據(jù)自己的索引獲得相對應(yīng)的內(nèi)容,在遍歷到內(nèi)容下的li元素,就獲得每個頭部相對應(yīng)的內(nèi)容下的總個數(shù)。
因為說,這是click事情后發(fā)現(xiàn)的事,但是忽略了頭部的第一個元素,我要它在瀏覽器的刷新的時候就開始執(zhí)行,所以我為頭部的第一個元素增加多了一個class類 在對這個class類進行判斷。最后~
就得到我想要的效果。當(dāng)個數(shù)==0||!==0的時候就執(zhí)行我所要的。
但是考慮到。后面可能會出現(xiàn)一切我所預(yù)料不到的事,我不要它在我點擊的時候在執(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()
比較方便吧,目前來說得到我想要的結(jié)果。$.each()遍歷出每個內(nèi)容元素,然后在獲取內(nèi)容自己下面的li元素的總數(shù) 就可以判斷后得到我想要的效果
- jquery選擇器排除某個DOM元素的方法(實例演示)
- jQuery過濾選擇器:not()方法使用介紹
- jQuery獲取復(fù)選框被選中數(shù)量及判斷選擇值的方法詳解
- jQuery選擇id屬性帶有點符號元素的方法
- jQuery選擇器總結(jié)之常用元素查找方法
- JQuery 選擇和過濾方法代碼總結(jié)
- JQuery的常用選擇器、過濾器、方法全面介紹
- jquery $(this).attr $(this).val方法使用介紹
- 詳談jQuery中的this和$(this)
- jQuery中$this和$(this)的區(qū)別介紹(一看就懂)
- JQuery this 和 $(this) 的區(qū)別
- jQuery 選擇方法及$(this)用法實例分析
相關(guān)文章
QRCode.js:基于JQuery的生成二維碼JS庫的使用
本篇文章主要介紹了QRCode.js:基于JQuery的生成二維碼JS庫的使用,具有一定的參考價值,有興趣的同學(xué)可以了解一下2017-06-06dreamweaver 8實現(xiàn)Jquery自動提示
這篇文章主要介紹了dreamweaver 8實現(xiàn)Jquery自動提示的方法,需要的朋友可以參考下2014-12-12多功能jQuery樹插件zTree實現(xiàn)權(quán)限列表簡單實例
這篇文章主要介紹了多功能jQuery樹插件zTree實現(xiàn)權(quán)限列表簡單實例,優(yōu)異的性能、靈活的配置、多種功能的組合,是樹插件zTree最大的優(yōu)勢,感興趣的小伙伴們可以參考一下2016-07-07ASP.NET中基于JQUERY的高性能的TreeView補充
根據(jù) 假正經(jīng)哥哥 的博客整理,我第一次使用的另外的TREEVIEW,可是 做出來的效果 太卡,不知道什么原因。這次用的假正經(jīng)哥哥的這篇文章。2011-02-02淺談jquery回調(diào)函數(shù)callback的使用
這篇文章主要簡單介紹了jquery回調(diào)函數(shù)callback的使用,需要的朋友可以參考下2015-01-01兩個select之間option的互相添加操作(jquery實現(xiàn))
兩個select,將其中一個select選中的選項添加到另一個select中,或者點擊全部添加按鈕將所有的option都添加過去.2009-11-11