Jquery - 多くの親の子どもとの.next（）

Question

私は、カレンダー内の複数の表にまたがって表のセルを強調表示するスクリプトを作成しています。 ハイライトされる日は、クラスが「利用可能」です。 これは、現在のjQueryコードである：

$(document).ready(function(){ 
$("td.available").mouseenter(function() { 
    $(this).addClass("highlight"); 
    $(this).next().addClass("highlight"); 
}); 
$("td.available").mouseleave(function() { 
    $(this).removeClass("highlight"); 
    $(this).next().removeClass("highlight"); 
}) 
}); 

しかし、のみ強調表示するホバーされた要素を含むテーブル内で動作。私は、.next（）は$("td.available")によって返されたセットではなく、生のDOM上で動作していると仮定します。

セットを正しく操作するにはどのような機能を使用する必要がありますか？

編集： 何が起こりたいのかは、隣接するセルを強調表示することです。これは、例えば次の7つのセルも同様に強調表示されるように拡張することができる。

31を含むセルにカーソルを合わせると、ハイライトする他のセルが次の月を含む別のテーブルに表示されます。私は、td要素のセットを得るために、さまざまな "each"を使用する必要があると推測しています。

Answer 1

each()を使用する必要があります。 next()はDOMを歩くだけです。

Answer 2

私はあなたがしようとしていることを正確にはわかりませんが、next()は、次の要素だけを取得し、その要素の後に続くすべての要素がトリガーされるわけではありません。 nextAll()に「td.available」というセレクタを使用するとよいでしょう。あるいは、ハイライトされない要素が現在のセルに続く要素だけでない場合は、すべての表のセルを再選択する必要があります。

Answer 3

mouseenterイベント内の$（this）が呼び出されたとき、それはマウスが入力された特定のTDを意味しますが、文書内のtd.availableの全セットを意味しません。

つまり、$（this）.addClass（...）は、 "hovered" tdにクラスを追加し、$（this）.next（）。addClass（...）はクラスを「抱きしめられた」tdの兄弟であっても、それは利用できません。

私はあなたが期待したもの、特定のわからない、しかし、あなたは、ユーザーがテーブルをホバーしたい、その後、使用可能なすべてのセルは「光」アップする場合は、あなたは以下を試すことができます。

$(".tableNeedToLightUp").mouseenter(function(){ 
    $("td.available", this).addClass("highlight"); // This select all available tds in the table, if all table light up, take away "this" 
} 

そして、 mouseoutイベントも同様です。

Answer 4

私が正しくあなたの意図を理解している場合、これはトリックを行う必要があります。

function highlight_all_available_tds() { 
    $("td.available").addClass("highlight"); 
} 

function remove_highlight_from_available_tds() { 
    $("td.available").removeClass("highlight"); 
} 

$(document).ready(function() { 
    $("td.available"). 
     mouseenter(highlight_all_available_tds). 
     mouseleave(remove_highlight_from_available_tds); 
}); 

Answer 5

をjQueryのは、それの最新バージョン（1.4）に新しい次の機能を提供します。私は私のポストに関数の短い記述を述べました。それを見て、JQueryを使ってベストを尽くしてください。 ここ

http://aspnet-ajax-aspnetmvc.blogspot.com/2010/10/jquery-next-fucntion-with.html