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

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

WBOY

リリース： 2016-05-16 16:32:02

オリジナル

1221 人が閲覧しました

今日タブを書くときは、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 タグのみを見つけてインデックス値を取得できるようにしました。問題は解決され、できるようになりました。寝る！