JQuery で .each() を使用して要素を走査する 研究 note_jquery

今日タブを書くときは、jquery で .each() を使用して、次のブロックの表示を容易にするために、 each() でインデックス パラメーターを取得して li 要素の番号を取得する必要があります。ページ 次のコードを入力してください:

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

<頭>




<スクリプトタイプ="text/javascript">
$(function(){
$("li").each(function(index){
$(this).mouseover(function(){
$("#title .titsh").removeClass("titsh");
$("#content .consh").removeClass("consh");
$(this).addClass("titsh");
$("#content>div:eq("index")").addClass("consh");
})
                                                                                                 })

                                                                                  ＆lt; li class = "titsh"＆gt; option 1＆lt;/li＆gt;
＆lt; li＆gt;オプション2＆lt;/li＆gt;
＆lt; li＆gt;オプション3＆lt;/li＆gt;
＆lt; li＆gt;オプション4＆lt;/li＆gt;

                                                                                       

コンテンツ 1

                                                                                                                                                                                                                                                                                                                                                                                                                         

後で実際のページで使用してみると、上の li リストを変更しても、下の div ブロックは CSS スタイルと実際のブロックでは変わらないことがわかりました。ページ内の他のスタイルが競合していました。すべての CSS セレクターを独自のものに変更した後も、問題が依然として存在することがわかったので、ここにあるべきであると判断しました。

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

$("#title .titsh").removeClass("titsh");
$("#content .consh").removeClass("consh");
$(this).addClass("titsh");
$("#content>div:eq("index")").addClass("consh");

1文目と2文目のスタイルを取り出す場合は問題ありません。3文目は現在のliタグにtitsのスタイルを追加する、つまり最後の文はdivに追加するのが普通です。 div から取得: eq (インデックス) ブロックにスタイルを追加するときに失敗しました。

それでは次のとおりです:

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

$("li").each(function(index){
$(this).mouseover(function(){

この2つの文の間にアラート(インデックス)のポップアップウィンドウを追加してみたところ、10個以上のliタグのインデックス値がアラートされていました。したがって、 each() によって反復されるインデックス値は、その下の div ブロックのインデックス値に対応しません。このように、上の li タグが変更されても、その下の div ブロックは変更されません。それに応じて、js コードを変更しました:

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

<スクリプトタイプ="text/javascript">
$(関数(){
$("#title ul li").each(function(index){
$(this).click(function(){
$("#title .titsh").removeClass("titsh");
$("#content .consh").removeClass("consh");
$(this).addClass("titsh");
$("#content > div:eq(" Index ")").addClass("consh");
})
                                                                                                   })

.each() で反復する必要がある li 要素のセレクターに制限を追加し、タブ内の li タグのみを見つけてインデックス値を取得できるようにしました。問題は解決され、できるようになりました。寝る！

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。