Change class of list of li elements

Question

I tried for changing the class name of li with class each_feature to each_feature--display.On each click of load more I need to change class for next 3 li inside ul.

But the below javascript is not working for me. On load I called load_more.display_items() this also doesn't work.

Someone please help me to make this work

   <div class="export">
        <section class="container">
            <h2> Components Identified by scanner</h2>
             <ul class="components_features">
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <a class="link" onclick="load_more.show_more_items()">
                    <span >Load more ...</span>
                </a>
                <hr>
        </section>
    </div>

Javascript:

 var load_more = {
            el: $('.export .components_features'),
            list_index: 3,
            display_items: function() {
                if((this.list_index + 3) > this.el.find('.each_feature').length) {
                    this.el.find('.each_feature').addClass('each_feature--display');


                }

                this.el.find('.each_feature:lt(' + this.list_index + ')').addClass('each_feature--display');
            },
            show_more_items: function() {
                this.list_index += 3;

                this.display_items();

            }
        }

Answer 1

Something like this? Made in pure JS. For the a tag, you might want to prevent default link action if you are going to put a href.

<html>
<head>
<style>
    .feature{
        display: none;
    }
</style>
<script>
    function loadMore(){
        features = document.getElementsByClassName("feature");

        if(features.length > 0){
            var count = 0;

            while(features.length && count < 3){
                count++;
                features[0].className = "featureDisplay";
            }
        }
    }
</script>
</head>
<body>
    <ul>
        <li class="feature">
            1
        </li>
        <li class="feature">
            2
        </li>
        <li class="feature">
            3
        </li>
        <li class="feature">
            4
        </li>
        <li class="feature">
            5
        </li>
        <li class="feature">
            6
        </li>
        <a onclick="loadMore()">Load more ...</a>
    </ul>
</body>
</html>

The problem with using a for loop is that the value returned is a node list list which is a live object and it messes up the array when you modify a class. Read more about it here: javascript changes one some class names

Answer 2

on the 'load more' do this

            $(".each_feature").addClass('each_feature--display');
            $(".each_feature--display").removeClass('each_feature');

Of course you will have to adapt the code