How to access divs all divs with a micro-data="3" property/value?

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

why do you wrap your jquery objects in another $()? for example `PC_CellSpecValuesDiv.hover(..` would suffice. — Andy, Feb 14 '12 at 20:48
Or use find. This one may help you. http://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value — Sarowar, Feb 14 '12 at 21:22
Or use find(). try this one. http://stackoverflow.com/questions/4191386/jquery-how-to-find-an-element-based-on-a-data-attribute-value — Sarowar, Feb 14 '12 at 21:28

Didier Ghys · Accepted Answer · 2012-02-14T20:58:19.703

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"

edited Feb 14 '12 at 20:58

answered Feb 14 '12 at 20:45

Didier Ghys

30,396
9
75
81

Okay, this works: $(PC_CellSpecValuesDiv).filter("[data-col='"+C+"']").addClass("PC_Over"); – Evik James Feb 14 '12 at 20:50
@Didier - Inside `hover` OP is not using `$(this)` because OP wants to add class to `PC_CellSpecValuesDiv` which is not the one on which `hover` event is attached. – ShankarSangoli Feb 14 '12 at 20:56
You're right, i did not see the slight difference. Made the correction. – Didier Ghys Feb 14 '12 at 20:57

ShankarSangoli · Answer 2 · 2012-02-14T20:58:19.880

$(PC_CellSpecValuesDiv).data("col", 3) will set value 3 to data attribute data-col. $(PC_CellSpecValuesDiv).data("col") will return the value of data attribute so calling is(3) on it will throw an error.

Try this.

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() reduces the set of matched elements to those that match the selector or pass the function's test.

How to access divs all divs with a micro-data="3" property/value?

2 Answers2