Question

我如何定位最左边的li项目并将其着色为不同的颜色？

我正在选择任何项目悬停在此假装设置中的所有水平项目：

<ul class="features">
<li class="category"><a href="services_hwrep.html">Hardware Repair</a></li>
<li class="category"><a href="services_netts.html">Network Troubleshooting</a></li>
<li class="category"><a href="services_printsetup.html">Printer Setup</a></li>
</ul>

<ul class="features">
<li><a href="services_hwrep.html">Hardware Repair</a></li>
<li><a href="services_netts.html">Network Troubleshooting</a></li>
<li><a href="services_printsetup.html">Printer Setup</a></li>
</ul>


<ul class="features">
<li><a href="services_hwrep.html">Hardware Repair</a></li>
<li><a href="services_netts.html">Network Troubleshooting</a></li>
<li><a href="services_printsetup.html">Printer Setup</a></li>
</ul>

使用此代码：

$('ul.features li').on('mouseenter mouseleave', function () {
    $('ul.features > li:nth-child(' + ($(this).index() + 1) + ' )').toggleClass('pri_active');
});

所以，如果我要悬停在第三个列表的第n个子（2）上，我怎么能在第一个列表中更改nth-child（2）的背景？（有一类'类别'）

感谢任何帮助！

可以在此处找到我正在尝试做的实时视觉表示：

http://www.sinsysonline.com/repair/price.html

我希望突出显示的左侧类别li为蓝色，就像悬停时的价格li一样。

Answer 1

您只需要指定班级（li.category:nth-child...）：

$('ul.features li').on('mouseenter mouseleave', function () {
    $('ul.features > li.category:nth-child(' + ($(this).index() + 1) + ' )').toggleClass('pri_active');
});

我在这里工作：http://jsbin.com/ecunih/1/

单项目 - 通过jQuery的特定背景

1 个答案: