I have a page that displays every department in a building and each department's staff. Each department is output within a DIV element. Each DIV element has the class "dept" and within each DIV is a UL that contains the employees of each department within "li a" 's. Basically, it's nothing more than a bunch of DIVs with 1 heading / link to the department homepage and a number of LIs constituting the employees of the respective department(s).

Put another way, the markup looks something like this:

Code:
...
<div class="dept">
    <h3><a href="/projects/foobar/?q=node/81">Department 1</a></h3>     
    <ol>
          <li class="views-row views-row-1 views-row-odd views-row-first"><a href="/projects/foobar/?q=node/7">Smith, Mr. James</a></li>
          <li class="views-row views-row-2 views-row-even"><a href="/projects/foobar/?q=node/82">Johnson, Ms. Liz</a></li>
          <li class="views-row views-row-3 views-row-odd"><a href="/projects/foobar/?q=node/83">Kelly, Mr. Quincy</a></li>
          <li class="views-row views-row-4 views-row-even"><a href="/projects/foobar/?q=node/84">Reeves, Mr. Jordan</a></li>
          <li class="views-row views-row-5 views-row-odd"><a href="/projects/foobar/?q=node/85">Smith, Mr. Sam</a></li>
          <li class="views-row views-row-6 views-row-even"><a href="/projects/foobar/?q=node/86">Allen, Ms. Julia</a></li>
          <li class="views-row views-row-7 views-row-odd"><a href="/projects/foobar/?q=node/87">Harrison, Mr. Peter</a></li>
          <li class="views-row views-row-8 views-row-even views-row-last"><a href="/projects/foobar/?q=node/138">Thompson, Mr. Pete</a></li>
    </ol>
</div>
<div class="dept">
      <h3><a href="/projects/foobar/?q=node/11">Department 2</a></h3>       
      <ol>
          <li class="views-row views-row-1 views-row-odd views-row-first"><a href="/projects/foobar/?q=node/9">Reginold, Ms. Marty</a></li>
          <li class="views-row views-row-2 views-row-even"><a href="/projects/foobar/?q=node/10">Stockmire, Mr. Markus</a></li>
          <li class="views-row views-row-3 views-row-odd"><a href="/projects/foobar/?q=node/97">Smith, Mr. Tilson</a></li>
          <li class="views-row views-row-4 views-row-even"><a href="/projects/foobar/?q=node/98">Jonley, Ms. May</a></li>
          <li class="views-row views-row-5 views-row-odd views-row-last"><a href="/projects/foobar/?q=node/193">Fredricks, Mr. Johnny</a></li>
     </ol>
</div>
<div class="dept">
...
Here's what I need some help with: I'm trying to use jQuery to append each div's heading link to the end of each div in order to create a "Read More..." link IFF the number of li elements totals more than 5. I've been working on this but haven't got very far because each time I try to generate the appended "Read More..." link, I inadvertantly output ALL the links. I think this is due to my misunderstanding of how .each() is being used (or should be used).

Here's the jQuery I have so far (which isn't really working as expected):
Code:
//Contacts page...
var url = [];
$('.dept h3 a').each(function(){
   url.push($(this).attr('href'));
      /*$.each(url,function(key, value){
         if(value == $('.dept h3 a').attr('href')){
            $('.dept').append('<a href="'+value+'" title="'+value+'">'+value+'</a>');
               return false;
            }
        });*/
});
The url array successfully grabs the links as intended, so this part works! Ha. But the rest (the part I've commented-out) I'm having problems with...

Instead of outputting "value" IFF it matches what I assumed would be the current iteration of ".dept h3 a", the code instead outputs EVERY link in the array for EACH div--which winds up being a mess. I think I know why it's doing this: I'm not indicating which specific div to append to when the match is TRUE, but I'm not sure how to indicate which index'ed div to append to...

Can I do something like the following pseudo-code indicates? If so, how?:
Code:
...
$.each(url,function(key, value){
  if(value == $('.dept'+[key]+' h3 a').attr('href')){//How can I do this?
     $('.dept'+[key]).append('<a href="'+value+'" title="'+value+'">'+value+'</a>');//This too?
       return false;
     }
});
...
Hopefully, you understand what I'm trying to explain here... How can I do this? I'm obviously not understanding something with how jQuery / JavaScript iterates elements in loops or something... So if anyone can shine some light on this, you would make a complete stranger very happy.