how to check div is last child from parent div

Question

In Jquery or JavaScript have a function like .hasNext() . I have the code:

function showArrowClick() {
   var activeContact = $('.contact.white_bg');
   activeContact.removeClass('white_bg');
   activeContact.next().addClass('white_bg');
}

and parent div is

<div class="list">
     <div class="contact white_bg all_contacts">All</div>
     <div class="contact">Contact1</div>
     <div class="contact">Contact2</div>
</div>

After click last div need to do something . How can I do it?

Answer 1

You'll probably want :last-child .

$('a').click(function() {

  $('.list .contact:last-child').doSomething();

});

Edit:

Or if you meant clicking the last child itself...

$('.list .contact:last-child').click(function() {

  $(this).doSomething();

});

Answer 2

You can try .next() to check. read more . Use it with the .length method to get to check if there are any more item on the DOM.

Sample code

alert($('div.contact').next().length);

Answer 3

You should verify if there is any element when you're trying to select it:

function showArrowClick() {   
   var activeContact = $('.contact.white_bg');

   if(activeContact.next('div.contact').length > 0) {
     activeContact.removeClass('white_bg');
     activeContact.next().addClass('white_bg');
   }
}

Answer 4

Try Something Like

$('.list').find("div.contact:last").addClass('white_bg');

Second

$('.list .contact:last-child').addClass('white_bg');

Answer 5

你看过$ .fn.nextAll（）吗？

Answer 6

Use the:last-child selector

$(".list div:last-child").on('click', function(){
//Do something
});

Answer 7

function showArrowClick() {
   var activeContact = $('.contact.white_bg');
   var index = activeContact.index();
   if (index === $(".contact.white_bg").children().length - 1) {
     // Current seleceted is the last div
    }
   activeContact.removeClass('white_bg');
   activeContact.next().addClass('white_bg');
}