How do I use JavaScript and Nth-Last-Child to add and remove CSS classes?

Question

I'm not a JavaScript wizard by any means, but I'm trying to figure out a way with JavaScript to add and remove classes to a series of DIVs based on the click of one button. Let is say that I have a list:

<div id="homepage">
 <div class="hpFeature"></div> 
 <div class="hpFeature"></div>
 <div class="hpFeature"></div>
 <div class="hpFeature"></div>
 <div class="hpFeature"></div>
</div>

<button class="featureButton">Click Here</button>

My default CSS for progressive enhancement purposes so there is at least one image shown as fallback:

.hpFeature:nth-child(1) {display:block;}
.hpFeature {display:none;}
.fide {position: absolute; left:-9999px;}

...and my JavaScript so far is something like this:

var count = $('.hpFeature').length;

$(document).ready(function () {
    $('.hpFeature').css('display','block');
    $('.hpFeature').addClass('fide');
    $('.hpFeature:nth-child(' + count + ')').removeClass('fide');
});

$(function(){
    $(".featureButton").click(function(){
        $('.hpFeature').removeClass('fide');
    });
});

So, I'm trying to figure out a simple way to do this with the nth-last-child property showing the first image through JavaScript, and then scrolling through then when clicking on the button it goes to the next one in the count, removes .fide, and at the end goes back to the first (also I can't seem to get nth-last-child to work but can get nth-child to work).

Answer 1

If it were me, I would delegate the array functionality to a native javascript array.

I can then manipulate that array and have it read out as html.

So we could create an array

var hpFeatureArray = []

Create a function to bind to html

function refreshArray() {
  var content = '' 
  for (var i=0; i < hpFeatureArray.length; i++) content = content + '<div class="hpFeature"></div>'
  $('#homepage').html(content)
}

Refresh.

refreshArray()

As far as the actual manipulation of data, it's easy to use native JavaScript array manipulation now.

hpFeatureArray.push('whatever')
refreshArray()

Here's an example http://codepen.io/ajkochanowicz/pen/spfAL/

Answer 2

Instead of using the nth-child and the extreme positioning in the fide classe, I think you can do this with simply an "active" class (to identify which is the current section) and changing the display value. Something like this:

<div id="homepage">
    <div class="hpFeature active"></div> 
    <div class="hpFeature"></div>
    <div class="hpFeature"></div>
    <div class="hpFeature"></div>
    <div class="hpFeature"></div>
</div>

<button class="featureButton">Click Here</button>

. . . and replace the CSS with this:

.hpFeature {display:none;}
.hpFeature.active {display:block;}

Then, you're JS code would just need to do this:

$(document).ready(function() {
    $(".featureButton").on("click", function() {
        var $activeDiv = $(".active");
        var $nextDiv = null;

        if ($activeDiv[0] === $(".hpFeature:last-child")[0]) {
            $nextDiv = $(".hpFeature:first-child");
        }
        else {
            $nextDiv = $activeDiv.next();
        }

        $activeDiv.removeClass("active");
        $nextDiv.addClass("active");
    });
});

If I'm understanding what you are trying to do correctly, this should get you the functionality that you are looking for.