jquery .next() and .prev() within the same div

Question

I'm new to jquery (actually, to web design/development in general) and am trying to get this hierarchy panel system going for a site (90% accessed via mobile). I'm pretty close, but I can't seem to word what my problem is very well online.

Here's my code on jsfiddle https://jsfiddle.net/o7x4r67w/1/

var main = function() {
"use strict";
// Outer next arrow click
$('.out-arrow-next').click(function() {

// transition to the next outer slide
var currentOuterSlide = $('.outer-active');
var nextOuterSlide = currentOuterSlide.next();

// reset to the beginning if we've reached the end
if (nextOuterSlide.length === 0) {
  nextOuterSlide = $('.outer').first(".outer");
}

currentOuterSlide.hide(200).removeClass('outer-active');
nextOuterSlide.show(200).addClass('outer-active');

});

// Outer prev arrow click
$('.out-arrow-prev').click(function() {
// transition to the prevous outer slide
var currentOuterSlide = $('.outer-active');
var prevOuterSlide = currentOuterSlide.prev(".outer");

// reset to the end if we've reached the beginning
if (prevOuterSlide.length === 0) {
  prevOuterSlide = $('.outer').last();
}

currentOuterSlide.hide(200).removeClass('outer-active');
prevOuterSlide.show(200).addClass('outer-active');
});

// Inner next arrow click
$('.in-arrow-next').click(function() {
// transition to the next inner slide
var currentinnerSlide = $('.inner-active');
var nextinnerSlide = currentinnerSlide.next();

// reset to the beginning if we've reached the end
if (nextinnerSlide.length === 0) {
  nextinnerSlide = $('.inner').first(".inner");
}

currentinnerSlide.hide(200).removeClass('inner-active');
nextinnerSlide.show(200).addClass('inner-active');
});

// Inner prev arrow click
$('.in-arrow-prev').click(function() {
// transition to the previous inner slide
var currentinnerSlide = $('.inner-active');
var previnnerSlide = currentinnerSlide.prev(".inner");

// reset to the end if we've reached the beginning
if (previnnerSlide.length === 0) {
  previnnerSlide = $('.inner').last();
}

currentinnerSlide.hide(200).removeClass('inner-active');
previnnerSlide.show(200).addClass('inner-active');
});

};

$(document).ready(main);

This is just a mini-project to get the nested carousel-like setup working properly, then I plan to implement it to the actual site. The mobile version will have a swipe instead of arrows.

Basically what is happening is the outer panels switching work just fine, But say I switch the inner 'heroes' list. Hitting previous will set the 2nd outer class' final inner list to active. Hitting next will set the correct 1st outer panel's inner hero, but will also set the 2nd to active. Is this because I have both inner panels contain an 'inner-active' class? Or is this because the previous and next arrows are named the same? If that's the case, wouldn't this mean I'd have to create a click function for every single instance?

Thanks in advance!

gaetanoM · Accepted Answer

The problem is related on how you get the elements.

Use: $(this).parent().siblings('classname')

See more on: siblings and parent

var main = function() {
  "use strict";
  // Outer next arrow click
  $('.out-arrow-next').click(function() {

    // transition to the next outer slide
    var currentOuterSlide = $(this).parent().siblings('.outer-active');
    var nextOuterSlide = currentOuterSlide.next();

    // reset to the beginning if we've reached the end
    if (nextOuterSlide.length === 0) {
      nextOuterSlide = $(this).parent().siblings(".outer:first");
    }

    currentOuterSlide.hide(200).removeClass('outer-active');
    nextOuterSlide.show(200).addClass('outer-active');

  });

  // Outer prev arrow click
  $('.out-arrow-prev').click(function() {
    // transition to the prevous outer slide
    var currentOuterSlide = $(this).parent().siblings('.outer-active');
    var prevOuterSlide = currentOuterSlide.prev(".outer");

    // reset to the end if we've reached the beginning
    if (prevOuterSlide.length === 0) {
      prevOuterSlide = $(this).parent().siblings('.outer:last');
    }

    currentOuterSlide.hide(200).removeClass('outer-active');
    prevOuterSlide.show(200).addClass('outer-active');
  });

  // Inner next arrow click
  $('.in-arrow-next').click(function() {
    // transition to the next inner slide
    var currentinnerSlide = $(this).parent().siblings('.inner-active');
    var nextinnerSlide = currentinnerSlide.next();

    // reset to the beginning if we've reached the end
    if (nextinnerSlide.length === 0) {
      nextinnerSlide = $(this).parent().siblings('.inner:first');
    }

    currentinnerSlide.hide(200).removeClass('inner-active');
    nextinnerSlide.show(200).addClass('inner-active');
  });

  // Inner prev arrow click
  $('.in-arrow-prev').click(function() {
    // transition to the previous inner slide
    var currentinnerSlide = $(this).parent().siblings('.inner-active');
    var previnnerSlide = currentinnerSlide.prev(".inner");

    // reset to the end if we've reached the beginning
    if (previnnerSlide.length === 0) {
      previnnerSlide = $(this).parent().siblings('.inner:last');
    }

    currentinnerSlide.hide(200).removeClass('inner-active');
    previnnerSlide.show(200).addClass('inner-active');
  });

};

$(document).ready(main);

@charset "utf-8";

/* zocial */

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.outer {
  display: none;
}

.outer-active {
  display: block;
}

.inner {
  display: none
}

.inner-active {
  display: block;
}

`

jquery .next() and .prev() within the same div

Answers (2)

Related Questions