获取第 n 个子节点并对其进行操作:jQuery
下面的代码仅作用于最后一个子元素,并触发所有其他子元素的函数。
$('.streetdog').hide();
$('.cat').mouseenter(function(){
var $catVal = $(".cat").index(this);
$('.streetdog:nth-child('+$catVal+')').show();
});
您可以在 jsfiddle 处查看演示。 基本上我试图触发 .cat
的特定循环和悬停的子元素
The code below only acts upon the last child and it triggers the function for all the other child elements.
$('.streetdog').hide();
$('.cat').mouseenter(function(){
var $catVal = $(".cat").index(this);
$('.streetdog:nth-child('+$catVal+')').show();
});
You can see the demo at jsfiddle.
Basically I'm trying to trigger the child element of the specific loop and hover of .cat
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
使用
:eq
而不是:nth-child
。由于.eq()
比:eq
更高效,因此请使用.eq()
代替:Fiddle: http://jsfiddle.net/rkM8N/1/
$('.streetdog').eq()
创建一个由其类名的所有元素组成的集合等于streetdog
。然后,.eq(n)
返回该集合中的第 n 个元素。$('.streetdog:nth-child(' + $catVal + ')')
选择.streetdog
元素,即$catVal
其父母的第一个孩子。因此,仅当$catVal
等于 2 时才会显示元素。Use
:eq
instead of:nth-child
. Since the.eq()
is more efficient than:eq
, use.eq()
instead:Fiddle: http://jsfiddle.net/rkM8N/1/
$('.streetdog').eq()
creates a set consisting of all elements whose classname equalsstreetdog
. Then,.eq(n)
returns the nth element in this set.$('.streetdog:nth-child(' + $catVal + ')')
select a.streetdog
element which is the$catVal
th child of its parent. Hence, the elements are only shown when$catVal
equals two.已经给出了一个完美的答案,但作为替代方案,如果您的 HTML 结构不会改变,您可以使用
parent
到达父div
,和next
获取.streetdog
元素:这是一个 工作示例。
eq
有效,但nth-child
无效的原因由 jQuery 文档:A perfectly good answer has already been given, but as an alternative, if your HTML structure is not going to change, you could use
parent
to get up to the parentdiv
, andnext
to get the.streetdog
element:Here's a working example.
The reason that
eq
works, butnth-child
does not is explained by the jQuery docs: