向 DOM 元素添加额外的标识符

adding extra identifiers to dom elements

本文关键字：标识符 添加 DOM 元素      更新时间：2023-09-26

我有一堆列表格式的菜单项，如下所示

<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项目的行为都应该相同。因此，当我像这样将鼠标悬停在i1中的任何一个项目上时，我想为所有项目添加一个类over。

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

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

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

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

Element.prototype.secondId = '';

和比 

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

因此，您只需在任何元素上设置一个新属性，您可以根据需要使用它，但只是在javascript中而不是html中。

我不建议向元素添加虚假属性，即使用户的浏览器不支持数据属性，这也将起作用：

$(".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',''));

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

请尝试使用以下代码一次：

<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>
相关文章：