CODEWITHSUNDEEP
javascriptjqueryhtml
Prusprus
Prusprus

Reputation: 8065

How to determine if element is last or first child of parent in javascript/jquery?

I have the following code, emulating a click on the left or right key down events. This is used as part of a gallery slideshow:

$(document).keydown(function (e) {
                    if(e.keyCode == 37) { // left
                        $(".thumb-selected").prev().trigger('click');
                    }
                    else if(e.keyCode == 39) { // right
                        $("thumb-selected").next().trigger('click');
                    }
                });

Essentially it picks the next or previous sibling (depending on the key pressed) and call the click event that will in turn display the appropriate image in the gallery. These images are all stored in a unordered list.

Where I am stumped is that when the first or last image is selected and the left or right button is clicked (respectively), I want it to get the next picture at the opposite end of the list of images. For example, if the first image is selected and the left arrow is pressed; given that there is no previous image (or li element), it will get the last image in the list. This way the keys never lose functionality.

Is there a function in jquery that will either check if the present element is the first or last child of its parent, or return its index relative to its parent so I can compare its index to the size() (child count) of his parent element?

Upvotes: 11

Views: 13079

Answers (5)

jdnz
jdnz

Reputation: 1207

In pure JavaScript you can use element.matches(). For example:

const thumbSelected = document.querySelector('.thumb-selected');
if (thumbSelected.matches(':first-child')) {
    // first child
} else if (thumbSelected.matches(':last-child')) {
    // last child
}

Upvotes: 1

beingmrkenny
beingmrkenny

Reputation: 192

You can do this in native JavaScript like so:

var thumbSelected = document.querySelector('.thumb-selected');

var parent = thumbSelected.parentNode;

if (thumbSelected == parent.firstElementChild) {
    // thumbSelected is the first child
} else if (thumbSelected == parent.lastElementChild) {
    // thumbSelected is the last child
}

Upvotes: 6

user113716
user113716

Reputation: 322602

You can use the is()[docs] method to test:

if( $(".thumb-selected").is( ':first-child' ) ) {
    // whatever
} else if( $(".thumb-selected").is( ':last-child' ) ) {
    // whatever
}

Upvotes: 6

Ehtesham
Ehtesham

Reputation: 2985

    var length = $('#images_container li').length;
    if(e.keyCode == 37) { // left
         if($('.thumb-selected').index() > 0)
              $(".thumb-selected").prev().trigger('click');
         else
              $('.thumb-container').eq(length-1).trigger('click');
     }

     else if(e.keyCode == 39) { // right
         if($('.thumb-selected').index() < length-1)
             $("thumb-selected").next().trigger('click');
          else
              $('.thumb-container').eq(0).trigger('click');
     }

.thumb-container is the parent element of the all the thumbs. At least what I got from your code.

HTML

    <ul class="thumb-container">
        <li>thumb</li>
        <li>thumb</li>
            .
            .
            .
    </ul>

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

You could use index() which returns the index of the element or you could use prev() and next() to check if there is one more element.

if(e.keyCode == 37) { // left
    if($(".thumb-selected").prev().length > 0)){
        $(".thumb-selected").prev().trigger('click');
     }else{
        //no more elements                     
      }
}
else if(e.keyCode == 39) { // right
    if($(".thumb-selected").next().length > 0)){
        $(".thumb-selected").next().trigger('click');
     }else{
        //no more elements                     
      }
}

EDIT - i updated the code because it makes more sense to use next() and prev() instead of nextAll() and prevAll()

Upvotes: 2

Related Questions