Question

我正在使用jQuery 1.7.1。

如果柱头div悬停在上面，我试图高亮显示一列div。

如果具有PC_ColumnHeadDiv类的div具有data-col =“3”属性，我想为具有data-col =“3”属性的PC_CellSpecValuesDiv类的所有div添加一个类。 / p>

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

我在这里要做的是找到所有div的CellSpecDivs，其中data-col属性设置为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");

让这条线路正常工作的正确方法是什么？

修改

这条线有效。这是编码的最好方法，假设其余的将保持不变吗？

$(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")将返回data属性的值，因此在其上调用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()将匹配元素的集合减少为与选择器匹配的元素或传递函数的测试。

如何使用micro-data =“3”属性/值访问div所有div？

2 个答案: