SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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,711
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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,711
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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,711
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
  •