How did I read this function?
function showTweet(username) {
$( "<ul/>", {
"class": "my-user-list",
html: usertweets[username].join( "<li/>" )
}).appendTo( $("#tweets") );
}
So I can see that the selector is targeting an unordered list, but what happens after the comma and why is it in curly braces?
I understand the part .append
. I don't understand what "class": "my-user-list"
and what they are doing html: usertweets[username].join( "<li/>")
. Note that usertweets
is an array.
Any understanding would be greatly appreciated!
source to share
The selector doesn't target ul
- it creates it. The second parameter is an object that contains properties for the new item ul
. It is then added to the DOM by adding it to the element #tweets
.
To show the difference:
// to create a ul element in memory
$('<ul></ul>'); // or...
$('<ul />');
// select all ul elements currently in the DOM
$('ul');
source to share
It doesn't target the ul, first creates an element <ul>
and sets <ul>
class
to "my-user-list"
, then sets its html inside it to usertweets[username].join("<li/>")
, which should create some <li>
, and finally add the newly created <ul>
and <li>
inside it to $("#tweets")
.
You can see more from jQuery # .jQuery () .
source to share
Curly braces for PlainObject , which is a plain JavaScript object. From this I would read
Create me <ul>
with a class my-user-list
with html lists of usertweets associated with <li/>
and add this to <ul>
and add ul to the element with idtweets
Here's an example
source to share