CODEWITHSUNDEEP
jqueryparentchildrencss-selectors
z3phir
z3phir

Reputation: 49

using jquery how can i test if parent is first child?

we have 

<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>

on hover over any link i want to test if 'parent' is first-child of 'grandparent' if not i want to apply a class

this is just a simplified example i don't have class names in the element parent and grandparent

Upvotes: 1

Views: 2832

Answers (8)

j08691
j08691

Reputation: 208032

Compare the elements with:

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

jsFiddle example

Or:

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

Upvotes: 0

aowie1
aowie1

Reputation: 846

$('.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/

Note: You will have to adjust this solution to suit your specific DOM elements since you aren't using classnames.

Upvotes: 1

adeneo
adeneo

Reputation: 318352

If you just need to set styles you can do this with CSS and the adjacent sibling selector (CSS3)

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

FIDDLE

Upvotes: 1

Mike
Mike

Reputation: 2044

(function(){

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

})();

jsfiddle

Upvotes: 0

SteamDev
SteamDev

Reputation: 4414

Would probably do it like so:

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

Upvotes: 0

pecci
pecci

Reputation: 540

You can use the .not and the :first-child of jquery.. http://jsfiddle.net/7wLtY/

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

Upvotes: 0

LGVentura
LGVentura

Reputation: 1547

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

Fiddle:

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

Upvotes: 6

swornabsent
swornabsent

Reputation: 994

Use jQuery's .index() to test where it falls below grandparent.

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

Upvotes: 0

Related Questions