Question

我希望简单的问题。

我想使用jQuery在类似的基于列表的设置中识别相同的子项（水平等效）。假装我有这个：

<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

（*只是试图简化代码。我可以弄清楚样式和诸如此类的东西。）

需要定义：水平Li元素

改变： BG颜色：

感谢任何帮助！

Answer 1

不清楚你需要什么。但是，如果您希望相同的孩子根据其在同一个班级的另一个容器中的位置，您可以使用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');

Answer 2

你可以使用CSS3：nth-child（）选择器：见下面的链接

Style Odd and Even

jQuery - 设置var - 多个UI - 为每个ul定位相同的li子

2 个答案:

Fiddle