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

Answer 2

Element.prototype.secondId = '';

而不是

document.getElementById('id5').secondId = 13;

因为你只需在任何元素上设置一个你可以随意使用的新属性，但只是在javascript中而不是在html中。

Answer 3

我不建议在元素中添加false属性，即使用户的浏览器不能很好地支持数据属性，这也会起作用：

$(".groupItem").hover(
    function () {
        var className = this.className.split(' ')[1];
        $('.' + className).addClass("over");
    },
    function () {
        var className = this.className.split(' ')[1];
        $('.' + className).removeClass("over");
    }
);

注意：要求始终按上面指定的方式组织类。更安全的方式可能是：

var className = $.trim(this.className.replace('groupItem',''));

Answer 4

$(this).filter('#selector')

Answer 5

请尝试使用以下代码进行以下操作：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<style>
.menu{ display:inline;}
.menu li{ display:inline; float: left;width: 100px;}
.menu li ul{display:none;}
</style>
<script type="text/javascript">
 $(document).ready(function(){
 $(".group").hover(
    function () {
        $(this).find("ul").show();
    },
    function () {
        $(this).find("ul").hide();
    }
    ); 
 });
</script>
</head>
<body>
<ul class="menu">
    <li class="group">
        Group Title
        <ul>
            <li>GT 1</li>
            <li>GT 2</li>
        </ul>
    </li>
    <li class="group">
        Trochlear Nerve
        <ul>
            <li>TN 1</li>
            <li>TN 2</li>
        </ul>
    </li>
</ul>
</body>
</html>

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

5 个答案: