Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Jul 2015
    Posts
    1
    Member #
    51096

    Automatically sort and display articles

    I have a portfolio website that includes the following between header/footer:
    Code:
    <div class="cover-screen">
      <div class="grid grid--portfolio">
    
        <article class="grid__caption" data-category="all healthcare">
            <a href="portfolio-msh-cancer-001.html" class="overlay" data-background="img/gallery/portfolio/grid/msh_cancer_1_grid.jpg">
                <div class="content">
                    <h2>Y</h2>
                    <p>Description</p>
                </div>
            </a>
        </article>
    
        <article class="grid__caption" data-category="all healthcare">
            <a href="portfolio-msh-edor-001.html" class="overlay" data-background="img/gallery/portfolio/grid/msh_edor_1_grid.jpg">
                <div class="content">
                    <h2>Z</h2>
                    <p>Description</p>
                </div>
            </a>
        </article>
    
        <article class="grid__caption" data-category="all residential">
            <a href="portfolio-ws-cw-001.html" class="overlay" data-background="img/gallery/portfolio/grid/WS-CW_exterior_1_grid.jpg">
                <div class="content">
                    <h2>X</h2>
                    <p>Description</p>
                </div>
            </a>
        </article>
      </div>
    </div>
    I want to be able to add more articles with future projects that will automatically be sorted alphabetically on the page by the h2 tag within div.content

    I have tried adding following to the bottom of the page to no avail:
    Code:
    <script>
    jQuery("div.cover-screen > div.grid grid--portfolio > article.grid__caption > div.content").sort(function(a, b) {
        var upA = jQuery('h2', a).text().toUpperCase();
        var upB = jQuery('h2', b).text().toUpperCase();
        return upA > upB;
    }).appendTo('div.cover-screen');
    </script>
    Any help as to what I am missing?

  2.  


Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 08:47 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com