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

**Wolf_22** · Jan 15, 2013 08:33

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.

**Pullo** · Jan 15, 2013 14:16

Hi Wolf_22,

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

Try this. Does this do what you want?

Code:

<!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.

**Wolf_22** · Jan 16, 2013 09:04

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:

Code:

//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.

**Pullo** · Jan 16, 2013 09:16

Hey Wolf_22,

Originally Posted by Wolf_22

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?).

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

Originally Posted by Wolf_22

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.

Originally Posted by Wolf_22

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

Code:

//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');
      }
});

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:

Code JavaScript:

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

Does that help?

**Wolf_22** · Jan 16, 2013 09:35

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

**Pullo** · Jan 16, 2013 10:30

Hi there,

No problem.
How about this:

Code:

<!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>

**Wolf_22** · Jan 16, 2013 13:50

Thanks, Pullo! That did the trick!

**Pullo** · Jan 16, 2013 13:51

No problem!
I'm all about making complete strangers happy!

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions