SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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:

    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.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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.

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hey Wolf_22,

    Quote Originally Posted by Wolf_22 View Post
    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:

    Quote Originally Posted by Wolf_22 View Post
    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.
    Quote Originally Posted by Wolf_22 View Post
    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?

  5. #5
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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). :.)

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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>

  7. #7
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Pullo! That did the trick!

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    No problem!
    I'm all about making complete strangers happy!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •