4/14 "Moving Elements Around"


#1


Hello, I have been stuck on the Exercise 4 of the third section of the jQuery course for a little over a week (see link below)

https://www.codecademy.com/courses/web-beginner-en-v6phg/0/4?curriculum_id=50a3fad8c7a770b5fd0007a1

I have attempted to move the relevant paragraphs and tags, as per the instructions. However, during my most successful attempts, I keep receiving the following message :


"Oops, try again. It looks like you added more than one < p >! "

I can not figure out what I am doing incorrect. I have looked around the forum for possible solutions, but none of them seem to work for my issue.

I have attempted to solve the exercise in three different methods, hoping that one of them might point me in the correct direction:

Method 1:

$(document).ready(function(){
    $("div#one").after("<p> I can show you the WORLD!</p>") 
    $('#two').after("<p> Judd Appatow </p>")
});

$(document).ready(function() {
    $("#one").after("<p> I can show you the WORLD!</p>");
    $("#two").after($("p"));
});

Method 2:

$(document).ready(function(){
    $("div#one").after("<p> I can show you the WORLD!</p>") 
    $('#two').after("<p> Judd Appatow </p>")
});

$(document).ready(function() {
    var $para = $("p")
    $("#one").after($para);
    $("#two").after($para);
});

Method 3:

$(document).ready(function(){
    $("div#one").after("<p> I can show you the WORLD!</p>") 
    $('#two').after("<p> Judd Appatow </p>")
});

$(document).ready(function() {
    $("#one").after($("p"));
    $("#two").after($("p"));
});

Does anyone have any suggestions/insights that would point me in the right direction?

Thank you in advance for your assistance.


#2

Spot on, from the point of view of following exact instructions for one of the lessons. The example above that one (the first) is quite off the mark.

This one is incomplete, owing that there is no paragraph node in the page to select.

More on this, later.

Much the same as above; again there is no P-node in the DOM to select.


Now let's discuss this further, but on the stipulation that you have a correct simple solution in the first set of examples. We need to examine the sprite nature of the jQuery object your later examples is attempting to create and manipulate. To continue...

A sprite is an object that can be moved from place to place, generally speaking. We would need to to look it up to find other meanings and its etymology (perhaps something to do with ghosts, spirits or goblins which can appear at any place, any time). Referred to here, that is essentially what it is when we use before and after methods to relocate them.

Given an HTML page with only a body and perhaps a div wrapper, and no paragraph elements (P-nodes), the selector, $('p') is an empty node list. Not much of an object to move around the screen.

Now we can have an empty P-node (text-node is null) since it satisfies the selector above and the node list will have length, 1. To create that node, we can have jQuery do it...

para = $('<p/>');    // same as '<p></p>'

This does not create a paragraph element in the page, but an object in memory, referred by the name, para. This object we may move anywhere we wish, and update the text-node data at any instance we choose. To describe our variable a little more accurately, let's add the $ prefix to the name in order to indicate that it is a jQuery object reference (pointer).

    $para = $('<p/>'); 
    $('#one').after($para.text("first paragraph is above me"));

And after you have observed that,

    $('#two').after($para.text("second paragraph is above me"));

We should go back and qualify your first example (the one I said was spot on), knowing what the above demonstrates.

In the first statement, we actually create a paragraph node in the DOM. That means the second statement returns a P-node list, which tree will contain the newly inserted paragraph; and, since it finds and selects it, it can move it.

Back to this latest example, we see it doesn't just move it, it updates it, as well. Very powerful stuff to play around with and master. It is these sorts of things that make Mr. Resig's library so useful.


#3

Now on to a more dynamic example using traversal, without id's.

We know that jQuery is ported directly to CSS (by way of the selectors) and so we can use all the pseudo-classes in our selectors. This, and a handful of really useful methods makes jQ the mother of all inventions in the following application.

Given our ealier sprite, $para, and an assumed DOM that contains several paragraphs, each of which we could be tracking as they scroll into view (won't get into that scripting, but it is feasible)...

// assume 'n' and all child elements are '<p>'

$(':nth-child(' + n + ')').after($para.text("Paragraph " + (n).toString() + " above me."));

// assume `n`

$('p:nth-child-of-type(' + n + ')').after($para.text("Paragraph " + (n).toString() + " above me."));

It should be noted that none of this is tested, so if you find bugs, let us know.

Observe the location bar as you scroll though posts on this forum. Notice the id number changing as each new post comes into view? That is the same effect I describe above, only with jQuery, instead of the framework driving this forum.


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.