jQuery - strange関数の動作

Question

私はULリストと、選択されたLI要素（https://stackoverflow.com/a/8883690/106616）のすべての親を選択するコードを持っています。今、私は他のLI要素を選択するときに選択をクリアしたいです。

（単純に、新しいパスを選択する前に、以前の選択を消去するためにアレイを繰り返した後、新しいパスを選択して、新しいパスを選択します）その配列へのアイテム）

$('#nav li').click(function() { 
     //clear the previous selection 
     $.each(myArray, function (i, v) { 
      console.log('loop: ' + v); 
      $('#nav li a[href="' + v + '"]').css('background-color', 'Green'); 
     }); 

     myArray.lenght = 0; 

     //add the new selection 
     $(this).children('a').each(function (item) { 
      myArray.push($(this).attr('href')); 
      console.log('adding: ' + $(this).attr('href')); 
      $(this).css('background-color', 'Red'); 
     }); 
    }); 

しかし、そのコードでは、最初のパスを選択するとその出力が生成されます。 ＃/ 1210

ループ：＃/ 1210

追加＃/ 1209

ループ＃/ 1210

ループ＃/ 1209

を添加

追加：＃/ 1208

たとえば、第2経路は、出力は次のとおり

ループ＃/ 1210

ループ＃/ 1209

ループ＃/ 1208

追加＃/ 1188

ループ：＃/ 1210

ループ：＃/ 1209

ループ＃/ 1208

ループ＃/ 1188

追加＃/ Iが出力されるべきだと思う1187

（第2経路選択）

ループ。 ＃/ 1210

ループ：＃/ 1209

ループ：＃/ 1208

追加：＃/

1188が追加：＃/

1187は、誰かが私のためにこれを説明できますか？

Answer 1

クリックイベントは、a要素から発生します。最初にキャッチする前にキャッチして、最初にliに気泡を入れて、すべてaをデフォルトにします。その後my solution

$('#nav a').click(function() { 
    $('#nav a').css('background-color', 'green'); 
}); 
$('#nav li').click(function() { 
    $(this).children('a').css('background-color', 'red'); 
}); 

を続行しかし、それはCSSクラスで、この全体のことを行うにははるかに良いです：

$('#nav a').click(function() { 
    $('#nav a.current').removeClass('current'); 
}); 
$('#nav li').click(function() { 
    $(this).children('a').addClass('current'); 
}); 

そしてCSSで：

#nav a { background-color: green; } 
#nav a.current { background-color: red } 

Answer 2

メニューにはli要素がネストされている可能性があります。メニューをクリックすると、イベントがバブルアップし、コールバックがトリガされ、以前選択された要素がクリアされます。イベントのバブリングを防ぐことができ、祖先li要素のすべてを選択して子供のスタイルを設定することができます。

$('#nav li').click(function() { 
    //clear the previous selection 
    $('#nav li > a').css("background-color", "green"); 

    //add the new selection 
    $(this).parentsUntil("#nav", "li").children("a").css("background-color", "red"); 

    return false; //Prevent the default action and prevent the event from bubbling up. 
}); 

インラインスタイルを使用する代わりに、クラスを使用してスタイルを定義することもできます。あなたが色が気に入らない、または追加のスタイリングが必要であると判断した場合、将来的にはより保守的です。