Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Weland
John Weland
42,478 Points

replacing text with javascript (jquery)

I am trying to make my breadcrumbs work in a little mock-up I made. here is a work space of that mock-up. http://teamtreehouse.com/workspaces/429552#

I need the text in the link clicked to replace the last bread crumb text with the text of the link. Not sure how to proceed.

Adam Moore
Adam Moore
21,956 Points

Sorry, I meant to put that up here:

When I click your link, it says that the page doesn't exist.

4 Answers

Adam Moore
Adam Moore
21,956 Points

I believe this works:

$('.breadcrumbs a:nth-last-child(2)').text($(this).text());

Because you are using:

$('.sub-nav a').click(function(e){}

then you can use $(this).text() inside of the $('.breadcrumbs a:nth-last-child(2)').text() to get the text from the .sub-nav a reference that began your function.

Hope this helps!

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

When I click your link, it says that the page doesn't exist.

John Weland
John Weland
42,478 Points
John Weland
John Weland
42,478 Points 
jQuery(document).ready(function($) {
    $(document).foundation();

    // Apply the .active class to clicked list item in the nav.top-bar
    $('.top-bar a').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('.top-bar .active').removeClass('active');
        $(this).parent().addClass('active');
    });

    // Apply the .active class to clicked anchor in the nav.sub-nav 
  // Apply the .sub-nav .active text to the breadcrumb item
    $('.sub-nav a').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('.sub-nav .active').removeClass('active');
        $(this).parent().addClass('active');
    $('.breadcrumbs a:nth-last-child(2)').text('test');
    });

});

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8"> 
        <link href="http://cdn.jsdelivr.net/foundation/5.2.2/css/normalize.css" rel="stylesheet" type="text/css"/>
        <link href="http://cdn.jsdelivr.net/foundation/5.2.2/css/foundation.min.css" rel="stylesheet" type="text/css"/>
    </head>

    <body>

    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">EMS Learning Resource Center</a></h1>
            </li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <section class="top-bar-section">
        <!-- Right Nav Section -->
            <ul class="left">
                <li class="active"><a href="#">Airways</a></li>
                <li><a href="#">Trauma</a></li>
                <li><a href="#">Medical</a></li>
                <li><a href="#">OB | Peds</a></li>
                <li><a href="#">Patient Assessment</a></li>
                <li><a href="#">Proprietary</a></li>
            </ul>
        </section>
    </nav>

    <nav class="breadcrumbs">
        <a href="#">Home</a>
        <a href="#">Airways</a>
        <a class="unavailable" href="#">Lower Airways</a>
        <a class="current" href="#">Carina</a>
        <a class="right" href="#">Take Exam</a>
    </nav>

    <br /> 
    <div class="row">
        <dl class="sub-nav">
            <dt></dt>
            <dd><a href="#">Aveoli</a></dd>
            <dd><a href="#">Bronchi</a></dd>
            <dd><a href="#">Bronchioles</a></dd>
            <dd class="active"><a href="#">Carina</a></dd>
            <dd><a href="#">Lung</a></dd>
        </dl>
    </div>







        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="http://cdn.jsdelivr.net/foundation/5.2.2/js/foundation.min.js"></script>
        <script src="sitewide.js"></script>
    </body>
</html>
John Weland
John Weland
42,478 Points
John Weland
John Weland
42,478 Points

works like a charm., I was afraid that $(this) would be the breadcrumb this not the link this. I hate "this" it makes it really confusing when talking about this THIS or that THIS