CODEWITHSUNDEEP
javascriptjquery
Ulug'bek
Ulug'bek

Reputation: 2832

how to check div is last child from parent div

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?

Upvotes: 5

Views: 1494

Answers (7)

Techie
Techie

Reputation: 45124

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

Upvotes: 1

Deadlock
Deadlock

Reputation: 1577

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

Upvotes: 1

Matt Fletcher
Matt Fletcher

Reputation: 9220

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();

});

Upvotes: 2

Peter Campbell
Peter Campbell

Reputation: 671

Use the:last-child selector

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

Upvotes: 1

whitneyit
whitneyit

Reputation: 1226

Have you looked at $.fn.nextAll()?

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Try Something Like

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

Second

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

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

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

Upvotes: 1

Related Questions