Question

I have a bunch of menu items in a list format like so

<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>

The idea is, if I hover on one item with class i1 then all i1 items should behave the same. So I thought of adding a class over to all i1 items when I hover on any of them like so.

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

The problem is I can’t think of a way to identify what item has just been hovered on aside from $(this). To remedy this I thought of adding i1 as an id to items, but different dom nodes shouldn’t have the same id. My next idea was to add the attribute value to the li items but to no avail (when I did a quick test with $(this).val() kept returning 0 regardless of the value actually stored in the node.

Is there any way I can add an identifier so I can just say $(this).<someIdentifier> , and target all the dom nodes with that identifier?

Answer 1

you can add an attribute groupID="{id}" and then call $(this).attr('groupID')