获取第 n 个子节点并对其进行操作:jQuery

发布于 2024-12-11 06:28:43 字数 354 浏览 0 评论 0原文

下面的代码仅作用于最后一个子元素,并触发所有其他子元素的函数。

$('.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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

青春如此纠结 2024-12-18 06:28:43

使用 :eq 而不是 :nth-child。由于 .eq():eq 更高效,因此请使用 .eq() 代替:

$('.streetdog').hide();
$('.cat').mouseenter(function(){
    var $catVal = $(".cat").index(this);
    $('.streetdog').eq($catVal).show();
});

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:

$('.streetdog').hide();
$('.cat').mouseenter(function(){
    var $catVal = $(".cat").index(this);
    $('.streetdog').eq($catVal).show();
});

Fiddle: http://jsfiddle.net/rkM8N/1/

$('.streetdog').eq() creates a set consisting of all elements whose classname equals streetdog. Then, .eq(n) returns the nth element in this set.

$('.streetdog:nth-child(' + $catVal + ')') select a .streetdog element which is the $catValth child of its parent. Hence, the elements are only shown when $catVal equals two.

一生独一 2024-12-18 06:28:43

已经给出了一个完美的答案,但作为替代方案,如果您的 HTML 结构不会改变,您可以使用 parent 到达父 div,和 next 获取 .streetdog 元素:

$(".streetdog").hide();
$(".cat").mouseenter(function() {
    $(this).parent().next().show(); 
});

这是一个 工作示例

eq 有效,但 nth-child 无效的原因由 jQuery 文档

:nth-child(n) 伪类很容易与 :eq(n) 混淆,甚至
尽管两者可能会导致截然不同的匹配元素。
使用 :nth-child(n) 时,所有子项都会被计算在内,无论它们是什么
是,并且仅当指定的元素与
附加到伪类的选择器。使用 :eq(n) 仅选择器
附加到伪类的值也被计算在内,不限于 的子类
任何其他元素,并选择第 (n+1) 个(n 从 0 开始)。

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 parent div, and next to get the .streetdog element:

$(".streetdog").hide();
$(".cat").mouseenter(function() {
    $(this).parent().next().show(); 
});

Here's a working example.

The reason that eq works, but nth-child does not is explained by the jQuery docs:

The :nth-child(n) pseudo-class is easily confused with :eq(n), even
though the two can result in dramatically different matched elements.
With :nth-child(n), all children are counted, regardless of what they
are, and the specified element is selected only if it matches the
selector attached to the pseudo-class. With :eq(n) only the selector
attached to the pseudo-class is counted, not limited to children of
any other element, and the (n+1)th one (n is 0-based) is selected.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文