jQuery 中$(this).index與$.each的使用指南
工作當中響應某個需求，切換選項卡的一個效果，根據(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事件。當切換頭部的時候執(zhí)行.頭部根據(jù)自己的索引獲得相對應的內(nèi)容，在遍歷到內(nèi)容下的li元素，就獲得每個頭部相對應的內(nèi)容下的總個數(shù)。
因為說，這是click事情后發(fā)現(xiàn)的事，但是忽略了頭部的第一個元素，我要它在瀏覽器的刷新的時候就開始執(zhí)行，所以我為頭部的第一個元素增加多了一個class類 在對這個class類進行判斷。最后~
就得到我想要的效果。當個數(shù)==0||!==0的時候就執(zhí)行我所要的。
但是考慮到。后面可能會出現(xiàn)一切我所預料不到的事，我不要它在我點擊的時候在執(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()遍歷出每個內(nèi)容元素，然后在獲取內(nèi)容自己下面的li元素的總數(shù) 就可以判斷后得到我想要的效果
- jquery選擇器排除某個DOM元素的方法（實例演示）
- jQuery過濾選擇器:not()方法使用介紹
- jQuery獲取復選框被選中數(shù)量及判斷選擇值的方法詳解
- jQuery選擇id屬性帶有點符號元素的方法
- jQuery選擇器總結之常用元素查找方法
- JQuery 選擇和過濾方法代碼總結
- JQuery的常用選擇器、過濾器、方法全面介紹
- jquery $(this).attr $(this).val方法使用介紹
- 詳談jQuery中的this和$(this)
- jQuery中$this和$(this)的區(qū)別介紹（一看就懂）
- JQuery this 和 $(this) 的區(qū)別
- jQuery 選擇方法及$(this)用法實例分析
相關文章
這篇文章主要介紹了jQuery+HTML5美女瀑布流布局實現(xiàn)方法,涉及jQuery結合HTML5實現(xiàn)瀑布流效果的動態(tài)加載功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
Jquery 實現(xiàn)表格顏色交替變化鼠標移過顏色變化實例
Jquery 實現(xiàn)表格顏色交替變化，點擊選中行，鼠標移過顏色變化效果附演示代碼 ，喜歡的朋友可以參考下2013-08-08
基于zepto的移動端輕量級日期插件--date_picker
這篇文章主要介紹了基于zepto的移動端輕量級日期插件--date_picker,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了jQuery響應鼠標事件并隱藏與顯示input默認值的具體實現(xiàn),需要的朋友可以參考下2014-08-08
jquery實現(xiàn)輸入框動態(tài)增減的實例代碼
主要功能是動態(tài)增減輸入框，而且支持對各個輸入框的檢測，每個輸入框在輸入內(nèi)容后，對其進行錯誤提示2013-07-07
本篇文章主要介紹了jQuery之動畫效果，詳細的介紹了各種動畫特效的用法，有需要的可以了解一下。2016-11-11
jQuery中$.each的用法，學習jquery的朋友可以參考下。2010-03-03
jQuery實現(xiàn)模仿微博下拉滾動條加載數(shù)據(jù)效果
這篇文章主要介紹了jQuery實現(xiàn)模仿微博下拉滾動條加載數(shù)據(jù)效果,涉及jQuery響應下拉滾動事件動態(tài)操作頁面元素的技巧,需要的朋友可以參考下2015-12-12
本文主要介紹了jQuery事件的相關知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
tab切換，是一個很常見的效果，今天在項目中遇到這樣一個問題。就是切換后，頁面刷新，又重新定位到第一個上了，很是郁悶2012-05-05