使用jquery如何测试父母是否是第一个孩子？答案

【问题标题】：using jquery how can i test if parent is first child?使用jquery如何测试父母是否是第一个孩子？
【发布时间】：2026-01-13 03:05:01
【问题描述】：

我们有

<div class="grandparent">
    <div class="parent"><a href="#">a</a></div>
    <div class="parent"><a href="#">b</a></div>
    <div class="parent"><a href="#">c</a></div>
</div>

悬停在我想测试的任何链接上是否“父母”是“祖父母”的第一个孩子如果不是我想申请一个类

这只是一个简化的示例，我在元素父级和祖父级中没有类名

【问题讨论】：

感谢所有回复的人

标签： jquery parent children css-selectors

【解决方案1】：

$(document).on('mouseenter','a',function(){
    if($(this).parent().is(':first-child')){
        alert('my parent is first child');
    } else {
        $(this).addClass('myParentIsNot');
    }
});

小提琴：

http://jsfiddle.net/9vW84/2/

【讨论】：

【解决方案2】：

如果您只需要设置样式，您可以使用 CSS 和相邻兄弟选择器 (CSS3) 来完成此操作

.grandparent .parent:first-child ~ .parent:hover a {
    color: red;
}

FIDDLE

【讨论】：

我喜欢这个，很干净
@dego89 - 谢谢，它并没有真正满足 OP 的要求，添加一个类，但通常你添加一个用于样式的类，这似乎可以用 CSS 完成仅限。
谢谢你是一个很好的例子，说明如何用 css 做到这一点，但不是我问的

【解决方案3】：

$('.grandparent > div').hover(function() {
    // If the child is NOT the first
    if (!$(this).is('div:first-child')) {
        $(this).addClass('not-first');
    }
});

http://jsfiddle.net/g2A6C/1/

注意：由于您没有使用类名，因此您必须调整此解决方案以适合您的特定 DOM 元素。

【讨论】：

【解决方案4】：

使用 jQuery 的 .index() 来测试它低于祖父母的位置。

  $("div.grandparent").on("mouseenter", "div.parent", function(e) {
    if($(this).parent(".grandparent").children("div.parent").index(this) > 0) {
      $(this).addClass("not-the-first");
    }
  });

【讨论】：

【解决方案5】：

您可以使用 .not 和 jquery 的 :first-child .. http://jsfiddle.net/7wLtY/

$('.parent').not(':first-child').hover(function() {
    $( this ).addClass( "not-first-child" );
  }, function() {
    $( this ).removeClass( "not-first-child" );
  });

【讨论】：

【解决方案6】：

可能会这样做：

http://jsfiddle.net/x858q/1/

var $parents = $(".parent"); // cache parents

$("a").hover(function(){
    // mouse enters link
    var $par = $(this).parent();

    if($parents.index($par) !== 0){
        $(this).addClass("not-first");
    }
}, function(){
    // mouse leaves link
    $(this).removeClass("not-first");
});

【讨论】：

【解决方案7】：

(function(){

    $("div.grandparent div.parent:not(:first-child)").on('mouseover', function(){
        $(this).addClass("classHere");
        console.log($(this));
    });

})();

jsfiddle

【讨论】：

【解决方案8】：

将元素与：

$('div > a').mouseover(function () {
    if ($(this).parent()[0] !== $('div > div:first')[0]) $(this).addClass('special')
})

jsFiddle example

或者：

$('div > a').mouseover(function () {
    if (!$(this).parent().is($('div > div:first'))) $(this).addClass('special')
})

【讨论】：

在每个 'a' 元素上绑定鼠标悬停是多余的。此外，OP 想要为不是第一个子元素的元素添加一个类。
@aowie1 - 放轻松，这只是一个例子。更新。请删除您的反对票。
已删除。只是为了引起你的注意，为 OP 提供一个更好的例子，这样你就有了战斗的机会；）
@aowie1 - 赞赏