Append a "Read More..." link to the bottom of each DIV

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. :slight_smile:

Hi Wolf_22,

I think I’ve understood what you are trying to accomplish.

Try this. Does this do what you want?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>append() example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>

  <body>
    <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">
      <h3><a href="/projects/foobar/?q=node/81">Department 3</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 3</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>

    <script>
      $(document).ready(function() {
        $('.dept').each(function(){
          if ($(this).find('ol > li').length >5){
            e = ($(this).find('h3 > a')).clone();
            $(this).append(e);
          }
        });
      });
    </script>
  </body>
</html>

If so, and you would like me to explain what I have done, just let me know.
If not, then just let me know what needs to be different.

Pullo, when I tried your code, it appended the link to the first and third DIVs. I needed it to be appended for every DIV (I might’ve been vague about this?).

In any event, I think I figured it out, so feel free to let me know what you think:

//Contacts page: responsive layout of lists.
$('.dept').each(function(key, parent){
   var url = $(this).find('h3 a').attr('href');//Gets link URL...
   $(this).append('<a class="more" href="'+url+'" title="More...">More...</a>');//Append the link to each DIV.
        
      if($(parent).find('ul').children('li').length > 5){
         console.log('test');
      }
});

The only thing I’m struggling with now is understanding how to make that IF block work… I’m trying to see if each UL inside the DIVs (parent) has more than 5 LIs. If so, then I’m trying to output console.log… But for reason, the IF logic isn’t working.

Any ideas why? There’s about 2 or 3 ULs that have around 6 or 7 LIs, so I know that much is true–I just think it’s got something to do with how I’m trying to reference the elements.

Hey Wolf_22,

Sorry, I thought that was what you wanted when I read this:

What are you doing with that if block?
Now, I’m confused.

Anyways, $(this) refers to the current div.dept you are in, so you can write:

if ($(this).find('ol > li').length >5){
  console.log("Pullo's confused");
}

Does that help?

Pullo, you’re absolutely right about that part I was mentioning concerning the IFF stuff. My apologies.

That aside, your code concerning the length stuff works. Essentially where this is all going is that I want to trim the LIs off if the number of LIs is more than 5 (seriously sorry about the confusion man). :.)

Hi there,

No problem.
How about this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>append() example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>

  <body>
    <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">
      <h3><a href="/projects/foobar/?q=node/81">Department 3</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 3</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>

    <script>
      $(document).ready(function() {
        $('.dept').each(function(){
          if ($(this).find('ol > li').length >5){
            $(this).find('ol > li').each(function(i){
              if (i>4) $(this).remove();
            })
            url = $(this).find('h3 a').attr('href');
            $(this).append('<a class="more" href="'+url+'" title="More...">More...</a>');
          }
        });
      });
    </script>
  </body>
</html>

Thanks, Pullo! That did the trick! :slight_smile:

No problem!
I’m all about making complete strangers happy!
:slight_smile: