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:
...
<div class="dept">
<h3><a href="[/projects/foobar/?q=node/81](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81)">Department 1</a></h3>
<ol>
<li class="views-row views-row-1 views-row-odd views-row-first"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/7"]/?q=node/7](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/7)">Smith, Mr. James</a></li>
<li class="views-row views-row-2 views-row-even"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/82"]/?q=node/82](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/82)">Johnson, Ms. Liz</a></li>
<li class="views-row views-row-3 views-row-odd"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/83"]/?q=node/83](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/83)">Kelly, Mr. Quincy</a></li>
<li class="views-row views-row-4 views-row-even"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/84"]/?q=node/84](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/84)">Reeves, Mr. Jordan</a></li>
<li class="views-row views-row-5 views-row-odd"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/85"]/?q=node/85](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/85)">Smith, Mr. Sam</a></li>
<li class="views-row views-row-6 views-row-even"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/86"]/?q=node/86](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/86)">Allen, Ms. Julia</a></li>
<li class="views-row views-row-7 views-row-odd"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/87"]/?q=node/87](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/87)">Harrison, Mr. Peter</a></li>
<li class="views-row views-row-8 views-row-even views-row-last"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/138"]/?q=node/138](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/138)">Thompson, Mr. Pete</a></li>
</ol>
</div>
<div class="dept">
<h3><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/11"]/?q=node/11](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/11)">Department 2</a></h3>
<ol>
<li class="views-row views-row-1 views-row-odd views-row-first"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/9"]/?q=node/9](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/9)">Reginold, Ms. Marty</a></li>
<li class="views-row views-row-2 views-row-even"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/10"]/?q=node/10](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/10)">Stockmire, Mr. Markus</a></li>
<li class="views-row views-row-3 views-row-odd"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/97"]/?q=node/97](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/97)">Smith, Mr. Tilson</a></li>
<li class="views-row views-row-4 views-row-even"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/98"]/?q=node/98](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/98)">Jonley, Ms. May</a></li>
<li class="views-row views-row-5 views-row-odd views-row-last"><a href="[/projects/[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/81"]foobar[URL="http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?q=node/193"]/?q=node/193](http://www.sitepoint.com/forums/view-source:http://139.102.48.147/projects/ics_wiki/?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):
//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?:
...
$.each(url,function(key, value){
if(value == $('.dept'[COLOR=#ff0000][B]+[key]+[/B][/COLOR]' h3 a').attr('href')){//How can I do this?
$('.dept'[COLOR=#ff0000][B]+[key][/B][/COLOR]).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.