javascript - 为 dom 元素添加额外的标识符

Question

我有一堆像这样的列表格式的菜单项

<ul class="menu unselectable">
    <li class="group">
        Group Title
        <ul>
            <li class="groupItem i0">item 0</li>
            <li class="groupItem i1 over">item 1</li>
        </ul>
    </li>
    <li class="group">
        Another Group Title
        <ul>
            <li class="groupItem i2">item 2</li>
            <li class="groupItem i1">item 1 (if I hover here, the others should too</li>
        </ul>
    </li>
</ul>

我的想法是，如果我将鼠标悬停在类 i1 的一项上然后所有i1元素应该表现相同。所以我想到了加一个类over所有 i1当我像这样将鼠标悬停在任何元素上时。

$(".groupItem").hover(
    function () {
        $(this).addClass("over");
    },
    function () {
        $(this).removeClass("over");
    }
);

问题是除了 $(this) 之外，我想不出一种方法来识别刚刚悬停在哪个元素上.为了解决这个问题，我想添加 i1作为id到元素，但不同的 dom 节点不应该有相同的 id .我的下一个想法是添加属性 value到 li元素，但无济于事(当我用 $(this).val() 进行快速测试时，无论 value 实际存储在节点中如何，都会返回 0。

有什么方法可以添加标识符，这样我就可以说 $(this).<someIdentifier> , 并定位所有具有该标识符的 dom 节点？

Answer 1

你可以添加一个属性 groupID="{id}" 然后调用 $(this).attr('groupID')