title: Change class of list of li elements
body: <p>I tried for changing the class name of li with class <code>each_feature</code> to each_feature--display.On each click of load more I need to change class for next 3 li inside ul.</p>
  
  <p>But the below javascript is not working for me. On load I called load_more.display_items() this also doesn't work.</p>
  
  <p>Someone please help me to make this work</p>
  
  <pre><code>   &lt;div class="export"&gt;
          &lt;section class="container"&gt;
              &lt;h2&gt; Components Identified by scanner&lt;/h2&gt;
               &lt;ul class="components_features"&gt;
                  &lt;li class="each_feature"&gt;
                      &lt;a href="//Nginx.com" target="_blank" title="Nginx" &gt;
                          &lt;h2 class="tech_name"&gt;
                              Nginx
                          &lt;/h2&gt;
                          &lt;/a&gt;
                          &lt;div class="octo"&gt;
                              &lt;div class="octo1"&gt;
                          &lt;img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="each_feature"&gt;
                      &lt;a href="//Nginx.com" target="_blank" title="Nginx" &gt;
                          &lt;h2 class="tech_name"&gt;
                              Nginx
                          &lt;/h2&gt;
                          &lt;/a&gt;
                          &lt;div class="octo"&gt;
                              &lt;div class="octo1"&gt;
                          &lt;img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="each_feature"&gt;
                      &lt;a href="//Nginx.com" target="_blank" title="Nginx" &gt;
                          &lt;h2 class="tech_name"&gt;
                              Nginx
                          &lt;/h2&gt;
                          &lt;/a&gt;
                          &lt;div class="octo"&gt;
                              &lt;div class="octo1"&gt;
                          &lt;img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="each_feature"&gt;
                      &lt;a href="//Nginx.com" target="_blank" title="Nginx" &gt;
                          &lt;h2 class="tech_name"&gt;
                              Nginx
                          &lt;/h2&gt;
                          &lt;/a&gt;
                          &lt;div class="octo"&gt;
                              &lt;div class="octo1"&gt;
                          &lt;img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="each_feature"&gt;
                      &lt;a href="//Nginx.com" target="_blank" title="Nginx" &gt;
                          &lt;h2 class="tech_name"&gt;
                              Nginx
                          &lt;/h2&gt;
                          &lt;/a&gt;
                          &lt;div class="octo"&gt;
                              &lt;div class="octo1"&gt;
                          &lt;img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="each_feature"&gt;
                      &lt;a href="//Nginx.com" target="_blank" title="Nginx" &gt;
                          &lt;h2 class="tech_name"&gt;
                              Nginx
                          &lt;/h2&gt;
                          &lt;/a&gt;
                          &lt;div class="octo"&gt;
                              &lt;div class="octo1"&gt;
                          &lt;img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;a class="link" onclick="load_more.show_more_items()"&gt;
                      &lt;span &gt;Load more ...&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;hr&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code> var load_more = {
              el: $('.export .components_features'),
              list_index: 3,
              display_items: function() {
                  if((this.list_index + 3) &gt; 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();
  
              }
          }
  </code></pre>