Javascript jQuery中的增量2类名

我的HTML中有2个列表。在这两种情况下，列表项都以一个单词开头，以一个递增的数字结尾

我需要的是当我停留在列表一上时，更改第二个列表中的项目。让我举例说明：

将item-1>>悬停在togleClass other-item-1上时 将item-2>>悬停在togleClass other-item-2上时

我现在的代码是：

<ul class="first-list">
    <li class="link-0" title="eleme=www, elemnt2=33">link 01</li>
    <li class="link-1">link 02</li>
    <li class="link-2">link 03</li>
</ul>

<ul class="second-list">
    <li class="element-0">appartment-01</li>
    <li class="element-1">appartment-02</li>
    <li class="element-2">appartment-03</li>
</ul>

但我不想重复写这段代码：

$(function () {
        for (var x = 0; x < 100; x++) {
            $('.link-'+ x).hover(function(){
                $('.element-'+ x).toggleClass('active');
                    });
        }
    });

$（函数（）{
对于（变量x=0；x<100；x++）{
$（'.link-'+x）.hover（函数（）{
$（'.element-'+x）.toggleClass（'active'）；
});
}
});

我知道我可以使用默认类或li选择器，但我需要使用增量类，因为当我悬停link-1时，我想显示.element-1

这不起作用，我不知道我在这里错过了什么

有人能帮我吗

Cheers

不使用增量类或id属性。它们是一种反模式，导致不必要的复杂代码，很难维护——正如您在发布的JS示例中所发现的那样

根据您的需求，更好的方法是使用

ul

上的类，然后按索引关联

li

元素，如下所示：

$（'.first list li'）。悬停（函数（）{
$（'.second list li'）.eq（$（this.index（））.toggleClass（'active'）；
});
.active{color:#C00；}


链接01
链接02
链接03


01号公寓
2号公寓
03号公寓
只需使用一个通用类即可：

<ul class="first-list">
    <li class="link-0 dummy-class" title="eleme=www, elemnt2=33">link 01</li>
        <ul class="second-list">
            <li class="element-0">appartment-01</li>
        </ul>
    <li class="link-1 dummy-class">link 02</li>
        <ul class="second-list">
            <li class="element-1">appartment-02</li>
        </ul>
    <li class="link-2 dummy-class">link 03</li>
        <ul class="second-list">
            <li class="element-0">appartment-03</li>
        </ul>
</ul>


$('.dummy-class').hover(function(){$(this).find('ul').show(); });


链接01

公寓-01

链接02

公寓-02

链接03

公寓-03


$（'.dummy class'）.hover（函数（）{$（this.find（'ul'）.show（）；}）；

这样，您不需要任何增量id或类
谢谢，但我需要为每个元素创建不同的行为。然后请解释您的预期结果。我编辑了我的问题，因为我忘了解释问题的一个重要部分。将第二个ul嵌套到第一个ul中如何？然后使用.find（）很容易选择正确的一个，并触发始终查看正确的一个。不幸的是，我不能这样做，因为开发比示例更复杂：（谢谢Rory，但我没有解释每个元素需要不同的行为是错误的。@Arol不同的行为是什么？元素是一个z索引为0的图像列表。我需要的是当你悬停时。link-0更改元素-1上的z索引，当你悬停时link-1更改元素-1上的z索引…并将此模式更改为无穷大。）在
.active
CSS类中设置
z-index
。
<ul class="first-list">
    <li class="link-0 dummy-class" title="eleme=www, elemnt2=33">link 01</li>
        <ul class="second-list">
            <li class="element-0">appartment-01</li>
        </ul>
    <li class="link-1 dummy-class">link 02</li>
        <ul class="second-list">
            <li class="element-1">appartment-02</li>
        </ul>
    <li class="link-2 dummy-class">link 03</li>
        <ul class="second-list">
            <li class="element-0">appartment-03</li>
        </ul>
</ul>


$('.dummy-class').hover(function(){$(this).find('ul').show(); });