• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 633
  • Last Modified:

jQuery Append() Array

Is there a more efficient way of doing this?  Each time the user clicks on the "more" button, five divs from #hidden are appended into #offers.

$('button').bind('click',function() {
                        var hiddenStuff = $('#hidden .landing_offer');
                        var hiddenStuffLength = $('#hidden .landing_offer').length;
                        for (i = 0; i < hiddenStuffLength; i++) {
                              $('#offers').append(hiddenStuff[1]);
                              $('#offers').append(hiddenStuff[2]);
                              $('#offers').append(hiddenStuff[3]);
                              $('#offers').append(hiddenStuff[4]);
                              $('#offers').append(hiddenStuff[5]);
                        }
                  });                  

Here's the HTML:

<div id="offers">
      <div id="29307" class="landing_offer"></div>
      <div id="29308" class="landing_offer"></div>
      <div id="29309" class="landing_offer"></div>
      <div id="29310" class="landing_offer"></div>
      <div id="29311" class="landing_offer"></div>
</div>
<button>More</button>
<div id="hidden">
      <div id="29312" class="landing_offer"></div>
      <div id="29313" class="landing_offer"></div>
      <div id="29314" class="landing_offer"></div>
      <div id="29315" class="landing_offer"></div>
      <div id="29316" class="landing_offer"></div>
      <div id="29317" class="landing_offer"></div>
      <div id="29318" class="landing_offer"></div>
      <div id="29319" class="landing_offer"></div>
      <div id="29320" class="landing_offer"></div>
      <div id="29321" class="landing_offer"></div>
</div>      
0
aznprncritic
Asked:
aznprncritic
  • 3
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
Why not use the counter?

And don't you want new ones

var hiddenStuffCounter = 0;
$('button').bind('click',function() {
  var hiddenStuff = $('#hidden .landing_offer');
  var hiddenStuffLength = $('#hidden .landing_offer').length;
  for (var i = hiddenStuffCounter, j=5; i < hiddenStuffLength; i++) {
    $('#offers').append(hiddenStuff[i]);
    j--; if (j==0) break;
  }
  hiddenStuffCounter=i;
});                 

OR create append new divs if they are empty

Open in new window

0
 
aznprncriticAuthor Commented:
Hi mplungjan,

That works pretty well.  I'd also like to animate this, so that when the user clicks on the button and the divs from #hidden get appended to #offers, the #offers did slides down to reveal the added divs.

So something like this:

$('button').bind('click',function() {
                    var hiddenStuff = $('#hidden .landing_offer');
                    var hiddenStuffLength = $('#hidden .landing_offer').length;
                    var offerHeight = $('#hidden-stuff').height();
                    for (var i = hiddenStuffCounter, j=5; i < hiddenStuffLength; i++) {
                        if( hiddenStuffLength > 1 ) {
                              $('#hidden-stuff').append(hiddenStuff[i]);
                              j--; if (j==0) break;
                              $('#hidden-stuff').animate({ "height": offerHeight }, "slow");
                        }
                    }
                    hiddenStuffCounter=i;
                  });  

<div id="offers">
      <div id="29307" class="landing_offer"></div>
      <div id="29308" class="landing_offer"></div>
      <div id="29309" class="landing_offer"></div>
      <div id="29310" class="landing_offer"></div>
      <div id="29311" class="landing_offer"></div>
     <div id="hidden-stuff"></div>
</div>

So as divs get appended to #hidden-stuff, animate() is used along with adjusting the css height of #hidden-stuff.  Problem is, the height eventually gets miscalculated.
0
 
Michel PlungjanIT ExpertCommented:
Can't you jut animate it to the actual height of the div?
0
 
aznprncriticAuthor Commented:
No, because each time a user clicks the button, the height of the container will continue to grow.
0
 
Michel PlungjanIT ExpertCommented:
Sorry, I am not that familiar with jQuery animate. Perhaps someone else can chime in - or ask a new question
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now