Question

I am using jQuery 1.7.1.

I am trying to hightlight a column of divs if the column head div is hovered over.

If a div with the class of PC_ColumnHeadDiv has a data-col=”3″ attribute, I want to add a class to all of the divs with the PC_CellSpecValuesDiv class that have a data-col=”3″ attribute.

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");
    }   
);

The problem piece of code is this:

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

What I am trying to do here is find all of the divs CellSpecDivs where the data-col attribute is set to 3.

$(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");

What’s the right way to get this line to work?

EDIT

This line works. Is this the best way to code this, assuming the rest will stay the same?

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

Answer 1

You can use the .filter() method.

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

It will check the current set of matched element for the attribute “data-col”. In case the element does not have that attribute, addClass() will have no effect, otherwise, the class name will be added.

DEMO

---

Some notes on your code:

• this double work to do:

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