Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

More Fun with DOM Manipulators

Let’s look at more ways to use some of the other DOM manipulators.

To use before() to rearrange order

  1. Open a new copy of the HTML5 boilerplate in your text editor and add the following markup (Script 4.2.html):
    <div id="content>
    <div class="article">
    <h3>Article 1</h3>
    <p>Lorem ipsum...</p>
    <a href="" class="mover">
    move to top</a></div>
    <div class="article">
    <h3>Article 2</h3>
    <p>Lorem ipsum... </p>
    <a href="" class="mover">
    move to top</a></div>
    <div class="article">
    <h3>Article 3</h3>
    <p>Lorem ipsum...</p>
    <a href="" class="mover">
    move to top</a></div>
    <div class="article">
    <h3>Article 4</h3>
    <p>Lorem ipsum...</p>
    <a href="" class="mover">
    move to top</a></div>
    <div class="article">
    <h3>Article 5</h3>
    <p>Lorem ipsum...</p>
    <a href="" class="mover">
    move to top</a></div>
    </div>
  2. Save the file as article.html and upload it to your web server. Load the page into your browser red-a.jpg.
    04_figure_10_a.jpg

    Click to view larger image

    red-a.jpg The list of articles in their normal order.

  3. Modify jquery.custom.js with the following code to move an article to the top of the list of articles:
    $('.mover').click(function(e) {
    e.preventDefault();
    $('#content div:first')
    .before($(this).parent('div'));
    });
  4. Save the jQuery file and upload it to your web server.
  5. Reload article.html in your web browser and click on any of the “move to top” links. The article moves to the top of the list red-b.jpg.
    04_figure_11_b.jpg

    red-b.jpg You can rearrange the list to bring an article to the top.

Let’s look at what’s in play here. Using before() makes things read backward so the selector selects the first div, using a jQuery selector extension (more about those in Chapter 5, “Harnessing Advanced Selectors”), :first. The first div in the group is the div you’ll insert your chosen div before. Whew. Then you invoke the before() method to carry your chosen div to the first spot in the group red-c.jpg.

04_figure_12_c.jpg

Click to view larger image

red-c.jpg Clicking the third div moves it to the top of the list.

To get the chosen div, you get the parent div of the clicked link. The parent() method is a DOM traversal method you’ll see again in Chapter 6, “Traversing the DOM Tree.”

The before() method has a counterpart that performs the same job exactly, the insertBefore() method. The insertBefore() method has one huge advantage: It’s much easier to read:

$(this).parent('div')
.insertBefore($('#content div:first'));

This line of code says to take the clicked element’s parent div and insert it before the first div in the selected group of divs. Which one should you use? As mentioned earlier, it’s a matter of personal preference.

  • + Share This
  • 🔖 Save To Your Account