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>      
aznprncriticAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.