javascript - jQuery - 设置 var - 多个 Ul - 为每个 ul 定位相同的 li child

Question

我希望是一个简单的问题。

我想使用 jQuery 在类似的基于列表的设置中识别相同的 child (水平等效)。假装我有这个:

<ul class="features">

<li class="category"><a href="services_hwrep.html">Hardware Repair</a></li>

***background on hover for both*** 
<li class="category"><a href="services_netts.html">Network Troubleshooting</a></li>
</ul>


<ul class="features">

<li class="category"><a href="services_something_else.html">Hardware Repair</a></li>

***background on hover for both*** 
<li class="category"><a href="services_something_further.html">Network

</ul>

我希望列表项 1 或 2(水平定位)的所有子项的背景都发生变化。

请不要提及表格。我没有使用它们的充分理由。

为了简单起见，这是我到目前为止的代码:

<script>
(function() { 

    $('ul.features li').on('hover', function() {

        var $eqTd = <! How to target every equivalent child across both ul's >
        var $blah = <! Whatever else I need >


            <! I Can Figure This Part Out. Need to think about defining the items before I declare a function... >

    });

})();
</script>

此时想知道。有CSS方法吗？我有一个活生生的例子，所以你可以在这里看到我想如何水平改变 BG:

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

(* 只是想简化代码。我可以弄清楚样式等等。)

需要定义:水平锂元素

改变:背景色:

感谢任何帮助!

Answer 1

不清楚您需要什么。但是，如果您想要基于其在具有相同类的另一个容器中的位置的相同 child ，您可以使用 index() 和 nth-child 尝试这种方式。此外，on(hover) 无效，它是 mouseenter 和 mouseleave 事件的组合。

请参阅此示例以从具有相同类的其他容器中选择相同的元素。

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

Fiddle

如果你想选择所有其他但不是悬停的你可以这样做

 $('ul.features > li:nth-child(' + ($(this).index() + 1) + ' )').not(this).toggleClass('active');