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

Ryan Hellerud
Ryan Hellerud
3,635 Points
Posted by Ryan Hellerud
Ryan Hellerud
3,635 Points

javascript question, looping through elements, finding inner-html and re-arranging it.

I have an issue that I'm trying to find a fix for as i have like a ton of links that have to be edited and Im wondering if I can use javascript to re-arrange the link elements. What I'm trying to do is to put the links that have the inner html of final exam and final exam key, under the last tab, or the graded assignments w/ answers. Let me post some code:

<dl class="accordion accorborder" data-accordion="">
            <dd class="accordion-navigation">
                <a href="#p13">Multicultural Studies</a>
                <div id="p13" class="content">
                    <div class="row">
                        <div class="small-6 columns">
                            <h6>code:</h6>HS-ES-17
                            <h6>Offerings:</h6><span class="label">OFL</span><span class="label success">OFY</span><span class="label alert">PIE</span>
                        </div>
                        <div class="small-6 columns">
                            <h6>Course Materials:</h6>
                            <ul>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/SyllabusMulticulturalStudies.PDF">Syllabus</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticulturalStudiesCourseContract.pdf">Course Contract</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticulturalStudiesWhiteboards_04172013.pdf">White Board</a></li>
                            </ul>
                        </div>
                    </div>
                    <p>Multicultural Studies is a one-semester elective history and sociology course that examines the United States as a multicultural nation. The 
course emphasizes the perspectives of minority groups while allowing students from all backgrounds to better understand and appreciate 
how race, culture and ethnicity, and identity contribute to their experiences. Major topics in the course include identity, immigration, 
assimilation and distinctiveness, power and oppression, struggles for rights, regionalism, culture and the media, and the formation of new 
cultures. In online Discussions and Polls, students reflect critically on their own experiences as well as those of others. Interactive 
multimedia activities include personal and historical accounts to which students can respond using methods of inquiry from history, 
sociology, and psychology. Written assignments and Journals provide opportunities for students to practice and develop skills for thinking 
and communicating about race, culture, ethnicity, and identity.</p>
                    <dl class="tabs" data-tab="">
                        <dd class="active"><a href="#p13a">Study Sheets</a></dd>
                        <dd><a href="#p13b">Study Sheets Answer Keys</a></dd>
                        <dd><a href="#p13c">Graded Assignments</a></dd>
                        <dd><a href="#p13d">Graded Assignment Answer Keys</a></dd>
                    </dl>
                    <div class="tabs-content">
                        <div class="content active" id="p13a">
                            <ul>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudy/MulticultStudStudyU1.PDF">Study Sheet Unit 1</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudy/MulticultStudStudyU2.PDF">Study Sheet Unit 2</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudy/MulticultStudStudyU3.PDF">Study Sheet Unit 3</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudy/MulticultStudStudyU4.PDF">Study Sheet Unit 4</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudy/MulticultStudStudyU5.PDF">Study Sheet Unit 5</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudy/MulticultStudFinal.PDF">Final Exam Key</a></li>
                            </ul>
                        </div>
                        <div class="content" id="p13b">
                            <ul>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudyKey/MulticultStudStudyKeyU1.PDF">Study Sheet w/ Answers Unit 1</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudyKey/MulticultStudStudyKeyU2.PDF">Study Sheet w/ Answers Unit 2</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudyKey/MulticultStudStudyKeyU3.PDF">Study Sheet w/ Answers Unit 3</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudyKey/MulticultStudStudyKeyU4.PDF">Study Sheet w/ Answers Unit 4</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudyKey/MulticultStudStudyKeyU5.PDF">Study Sheet w/ Answers Unit 5</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudStudyKey/MulticultStudFinalKey.PDF">Final Exam Key</a></li>
                            </ul>
                        </div>
                        <div class="content" id="p13c">
                            <ul>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudGraded/MulticultStudGradedU1.PDF">Graded Assignment Unit 1</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudGraded/MulticultStudGradedU2.PDF">Graded Assignment Unit 2</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudGraded/MulticultStudGradedU3.PDF">Graded Assignment Unit 3</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudGraded/MulticultStudGradedU4.PDF">Graded Assignment Unit 4</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudGraded/MulticultStudGradedU5.PDF">Graded Assignment Unit 5</a></li>
                            </ul>
                        </div>
                        <div class="content" id="p13d">
                            <ul>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudGradedKey/MulticultStudGradedKeyU1.PDF">Graded Assignment w/ Answers Unit 1</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudGradedKey/MulticultStudGradedKeyU2.PDF">Graded Assignment w/ Answers Unit 2</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudGradedKey/MulticultStudGradedKeyU3.PDF">Graded Assignment w/ Answers Unit 3</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudGradedKey/MulticultStudGradedKeyU4.PDF">Graded Assignment w/ Answers Unit 4</a></li>
                                <li><a href="/paperWork/Electives/MulticulturalStudies/MulticultStudGradedKey/MulticultStudGradedKeyU5.PDF">Graded Assignment w/ Answers Unit 5</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </dd>
        </dl>

can anyone help figure this out?

2 Answers

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Hey there, just a question, why don't you put them directly at the right place ?

Anyway, If I got what you ask, you just want to move all the anchors containing the string "Final" in their href attribute. For this there are some powerful selectors, so I tried to achieve what you want, if once again I correctly got what you want ;).

Here is the code:

$(function(){
    var elemToSelect = $('a[href*="Final"]'); //get all the anchors containing the "Final" string in a tab. In your example it seems there are two anchors.
    $('#p13d').append(elemToSelect);
    elemToSelect.after('<br>'); //insert a line break for more clarity.
    elemToSelect.css('background-color','red'); //same, just to see where these divs are now and to show it seems to work as expected.

});

I tested it on JSfiddle and this works as expected, for more information and a live demo, check this link. Juste remove all the Javascript and you'll see the specifics links will be at their origin places.

Hope that helps.

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

wow man thanks and great job. You're really smart!

geoffrey
geoffrey
28,736 Points
geoffrey
geoffrey
28,736 Points

Hi Ryan, check again the answer, I've edited it because there is no need to add a loop. It works without it... It's going to optimize your code.

Why don't you place these elements directly rightly ? Smart !? No, really, It's just I start to get better with JS & JQuery as I've been practicing quite a lot these last weeks, honestly.

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

well at first i didnt want to because i have 3 seperate schools with a lot of the same classes so it seemed like a lot of work but then i just went ahead and did it..