jQuery_jquery での $(this).index と $.each の使用ガイド

作業中の特定の要件に応じて、タブを切り替えると、各オプションの下のコンテンツ要素の合計数に基づいて、異なる HTML 変更が行われます (タブの下のコンテンツが空の場合、XXX と等しくなります。それ以外の場合は、XXX と等しくなります)。 XXX に等しい)

コードをコピー コードは次のとおりです:

$(関数(){
$(".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 alert("私は0未満です!!")
}
});
関数 moren(){
var moren=$(".moren").find('li')
If(moren.length==0){
alert("空いてますよ～チャンスはありません")
}
}
})

まず、タブのヘッダーを header と呼ぶことを宣言します

タブのコンテンツは content~
と呼ばれます
最初に思いつく方法 (愚かな方法):

バインディングによりクリック イベントが追加されます。ヘッダーを切り替えるときに実行され、ヘッダーはそのコンテンツの下の li 要素に移動した後、対応するコンテンツを取得します。各ヘッダーに対応するコンテンツの下の合計数が取得されます。

これはクリックイベントの後に発見されたものですが、head の最初の要素が無視されたため、ブラウザが更新されたときに実行を開始するようにしたため、head の最初の要素に要素を追加しました。このクラスのクラス。ついに〜

欲しい効果だけを得ることができます。数値==0||!==0 の場合、私が望んでいることが実行されます。

しかし、考えてみましょう。後で予期しないことが起こる可能性があります。クリックしたときに実行されるのではなく、ブラウザが更新されて読み込まれた後に実行されるようにします。ということで、初心者の私が頑張って方法を考えてみました

別の意味では、こちらの方が良いような気がします~:

コードをコピー コードは次のとおりです:

$(関数(){
$(".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
アラート(b)
If(b==0){
$(this).append("

0

の後に追加されました")
}
})
})

このメソッドは $.each() を使用します

より便利になり、これまでのところ希望する結果が得られています。 $.each() は各コンテンツ要素を走査し、コンテンツ自体の下にある li 要素の合計数を取得します。そうすれば、必要な効果を判断して取得できます