0

我希望是个简单的问题。

我想使用 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

（* 只是试图简化代码。我可以弄清楚样式等等。）

需要定义：水平锂元素

更改： BG 颜色：

任何帮助表示赞赏！

4

2 回答 2

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');
       });
});

小提琴

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

 $('ul.features > li:nth-child(' + ($(this).index() + 1) + ' )').not(this).toggleClass('active');
于 2013-05-27T04:16:20.047 回答
0

您可以使用 CSS3 :nth-child() 选择器：请参阅下面的链接

风格奇偶

于 2013-05-27T04:16:29.357 回答