Threadly - step 3


#1



Regarding step 3, one immediate question and then a follow up question later.

First, with reference to the script offered in the example, see below (provided script #1), I've read how the text method can be used to collect the contents of an element when a selector is referenced AND when an argument is NOT included. (note #1)

Also read was that when an argument is passed to the text method (note #2), the text method acts to inject the contents of the argument into the selector.

So in the script offered, (provided script #1), it appears that we're inserting the value of the variable; comment, into an unspecified list element and then storing that into a variable; html. No doubt I'm miss-interrupting this, can someone clarify what is going on in the script; (provided script #1)?

Thanks.


provided script #1
var html = $('<li>').text(comment);

note #1
var listContents = $('<ul>').text();

note #2
var someText = "Hello";
$('.aClass').text(someText);


#2

Have you completed the JavaScript and jQuery tracks? Are you up to speed with HTML and CSS?


#3

Completed JavaScript course through CC a few months ago without paying. Also added the Pro level of service thereabouts therefore if "projects" are at the end of that course, I've not worked on them.

Completed jQuery course through CC just recently and am currently slogging my way through these projects.

Have some basic exposure to html and css from updating a few client's sites that I worked on briefly and through a course at a community college. I don't claim to be a guru with those tools but familiar/knowledgeable with them.


#4

Okay, it would appear you have enough together to complete this task. Unfortunately I cannot reload this completed module so can't walk you through what I did.

The selector in example 1 is not a DOM selector but an element object generator. It creates an <LI> object (a transient element node) then populates its text node dynamically with comment which is defined in the form event handler. The jQuery object lives in memory, where it acts as a template for dynamically created list items appended to the comments list.

Think of the above as a closure, where the returned value from the jQuery function is a function, with comment as the live parameter in context of creation scope. This may take some reading to understand, but for now just work with it.

Note # 1 is kind of a head scratcher, from my own point of view. That shouldn't come as a surprise though. I'm still a newbie at heart. It would appear to be creating an unordered list with an empty text node.

But an UL doesn't normally have a text node (it does, but that's another discussion), it only has list items as child elements. Technically, if we wished to 'read' the content of an UL, we would examine the .html() of the selector. Again, this is another story. This line is a gray area for me, right now without context.

Note # 2 is bang on. It selects an item by className and assigns a text value to the text node. Of course, all elements with that class will have their text nodes overwritten.


#5

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