divにアクセスするにはどのようにマイクロデータ= "3"のプロパティ/値を持つすべてのdivですか？

Question

jQuery 1.7.1を使用しています。

私は、列頭部のdivが上に乗っている場合、divの列を強調表示しようとしています。

PC_ColumnHeadDivのクラスを持つdivにdata-col = "3"属性がある場合、data-col = "3"属性を持つPC_CellSpecValuesDivクラスを持つすべてのdivにクラスを追加します。

var PC_ColumnHeadDiv = $(".PC_ColumnHeadDiv"); 
var PC_CellSpecValuesDiv = $(".PC_CellSpecValuesDiv"); 

$(PC_ColumnHeadDiv).hover(
    function() { 
     var C = $(this).data("col"); 
     $(PC_CellSpecValuesDiv).data("col:"+C).addClass("PC_Over"); 
    }, 
    function(){ 
     $(PC_CellSpecValuesDiv).removeClass("PC_Over"); 
    } 
); 

コードの問題片がこれです：

$(PC_CellSpecValuesDiv).data("col:"+C).addClass("PC_Over"); 

私がここでやろうとしていますどのようなデータ-COL属性が3

に設定されたdivのCellSpecDivsのすべてを見つけることです

$(PC_CellSpecValuesDiv).data("col", 3).addClass("PC_Over"); 
$(PC_CellSpecValuesDiv).data("col").is(3).addClass("PC_Over"); 
$(PC_CellSpecValuesDiv).data("col").eq(3).addClass("PC_Over"); 

このラインを正しく動作させるにはどうすればよいですか？

EDIT

この行は動作します。残りを同じままにしておくと、これをコード化する最良の方法ですか？

$(PC_CellSpecValuesDiv).filter("[data-col='"+C+"']").addClass("PC_Over"); 

Answer 1

.filter()メソッドを使用できます。

PC_CellSpecValuesDiv.filter('[data-col=' + C + ']').addClass('PC_over'); 

属性 "data-col"の一致する要素の現在のセットをチェックします。要素にその属性がない場合、addClass（）は効果を持ちません。そうでなければ、クラス名が追加されます。

DEMO

---

あなたのコードのいくつかの注意：

• 行うには、この二重の作品：

  var PC_ColumnHeadDiv = $(".PC_ColumnHeadDiv"); 
  $(PC_ColumnHeadDiv) // "PC_ColumnHeadDiv" is a already jquery object 
  PC_ColumnHeadDiv.hover(...) // just use "PC_ColumnHeadDiv" 
  

Answer 2

$(PC_CellSpecValuesDiv).data("col", 3)は値3をデータ属性data-colに設定します。 $(PC_CellSpecValuesDiv).data("col")はデータ属性の値を返しますので、is(3)を呼び出すとエラーが発生します。

これを試してください。

PC_ColumnHeadDiv.hover(
    function() { 
     var C = $(this).data("col"); 

     PC_CellSpecValuesDiv.filter('[data-col=' + C + ']').addClass("PC_Over"); 
    }, 
    function(){ 
     PC_CellSpecValuesDiv.removeClass("PC_Over"); 
    } 
); 

filter()セレクタと一致または機能のテストに合格するものにマッチした要素の集合を減少させます。