Javascript 向dom元素添加额外标识符_Javascript_Jquery_Html_Css

Javascript 向dom元素添加额外标识符

javascript jquery html css

Javascript 向dom元素添加额外标识符,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一大堆这样的列表格式的菜单项 <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 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>

问题是，除了

$（this）

，我想不出一种方法来确定刚才悬停在哪个项目上。为了解决这个问题，我考虑将

i1

作为

id

添加到项中，但是不同的dom节点不应该具有相同的

id

。我的下一个想法是将属性

value

添加到

li

项中，但没有效果（当我使用

$进行快速测试时）（这一点）。val（）

始终返回0，而不管节点中实际存储的

值如何
有没有什么方法可以添加一个标识符，这样我就可以说$（this）。
，并将该标识符指向所有dom节点？
您可以添加一个属性groupID=“{id}”
，然后调用$（this）。attr（'groupID'）
您可以添加一个属性groupID=“{id}”
，然后调用$（this.attr（'groupID'））
$（this）.filter（'#selector'）$（this.filter（'#selector'））
及
document.getElementById('id5').secondId = 13;

由于这一点，您只需在任何元素上设置一个新属性，您可以根据自己的意愿使用它，但它只是在javascript中，而不是在html中
及
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',''));

我不建议向元素添加虚假属性，即使用户的浏览器不支持数据属性，这也会起作用：
$(".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',''));

请尝试按以下代码操作一次：
<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>


.菜单{显示：内联；}
.menu li{显示：内联；浮点：左；宽度：100px；}
.menu li ul{显示：无；}
$（文档）.ready（函数（）{
$（“.group”）。悬停(
函数（）{
$（this.find（“ul”）.show（）；
},
函数（）{
$（this.find（“ul”）.hide（）；
}
); 
});


组标题

燃气轮机1
燃气轮机2



滑车神经

TN 1
总氮2



请尝试按以下代码操作一次：
<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>


.菜单{显示：内联；}
.menu li{显示：内联；浮点：左；宽度：100px；}
.menu li ul{显示：无；}
$（文档）.ready（函数（）{
$（“.group”）。悬停(
函数（）{
$（this.find（“ul”）.show（）；
},
函数（）{
$（this.find（“ul”）.hide（）；
}
); 
});


组标题

燃气轮机1
燃气轮机2



滑车神经

TN 1
总氮2



或使用HTML5“data groupID”属性并使用“.data（'groupID'）”访问值……您通常可以添加任意属性，因此这应该可以工作，但如果您要这样做，最好使用以“data-”为前缀的文档化（在HTML5中受支持）数据属性，如：data groupID=“{id}”
请记住，并非所有传统浏览器都支持任意属性。lol我没有问题切断任何使用传统浏览器的人。互联网上不允许使用这些属性@GregPettit:DOr使用HTML5“data groupID”属性，并使用“.data（'groupID'）访问值…您通常可以添加任意属性，因此这应该可以，但如果您要这样做，还可以使用文档化（在HTML5中受支持）的数据属性，这些属性的前缀仅为“data-”，如：data groupID=“{id}”
请记住，并非所有传统浏览器都支持任意属性。lol我没有问题将任何使用传统浏览器的人删除。互联网上不应该允许使用这些属性@GregPettit:DCan你难道不可以使用$（“.over”）找出悬停在上面的内容吗
？你不能用$（“.over”）算出悬停在上面的是什么吗
？这也行得通，但我不得不说@Daniel's更优雅一点。谢谢KhaelThat也行得通，但我不得不说@Daniel's更优雅一点。谢谢KhaelThank's为你所做的一切努力@Umesh如果我的问题有误导性，我真的很抱歉，但这并不是我想要的。下次我会尽量更好地回答我的问题。干杯谢谢你的努力@Umesh如果我的问题有误导性，我真的很抱歉，但这不是我想要的。下次我会尽量把我的问题说得更清楚。啦啦队不是我想要的。谢谢你所做的一切，尽管@vmex151干杯。对不起，这不是我想要的。谢谢你所做的一切h@vmex151干杯。