Given the following list:
links = %w(
/foo/bar/baz
/foo/bar
/foo/42/43/44/test
/foo/42
/foo/test/test2
)
I would like to obtain an HTML unordered list such as:
<ul>
<li>
foo
<ul>
<li>
bar
<ul>
<li>baz</li>
</ul>
</li>
<li>
42
<ul>
<li>
43
<ul>
<li>
44
<ul>
<li>test</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
test
<ul>
<li>test2</li>
</ul>
</li>
</ul>
</li>
</ul>
I through I may be a good idea to do it in functionnal style, with a method which call itself. Have you got an example of code to do this? Thanks a lot.
Iterate strings on list
Scan the string with a regex something like /(/\w+)/
Iterate the scan results and build your html
I think that's just it .
OR you could use a some javascript to generate a tree-ish thing / whatever you need
Related
I have a pice of code that creates the list shown bellow.
home
page2
page3
I want to remove the unused dot, and understand where it is coming from.
<ul>
<li>Home
<li>
<li> page2 </li>
<li> page3 </li>
</ul>
Actually, you forgot to close
<li>
It should be:
<li>Home</li>
The second open <li> signifies a new <li> nested within another, hence, an empty bullet point.
It is a syntax error, and must be a </li> rather than a <li>
<doctype html>
<html>
<body>
<ul>
<li>Home</li>
<li> page2 </li>
<li> page3 </li>
</ul>
</body>
</html>
<li> with only the opening tag is perfectly valid, when this is followed by another <li> or by any ending tag.
In your case the second <li> creates a new empty bulletpoint as browsers see your code like this:
<ul>
<li>Home
{</li>}<li>
{</li>}<li> page2 </li>
<li> page3 </li>
</ul>
The {</li>}'s (without {}) are the tags what browsers add before next starting tag to end previous <li> elements.
The same is true for example for <p> as well.
More information: https://www.w3.org/TR/html5/syntax.html#optional-tags
I'm doing a lesson on Codecademy about nested lists in html.
My code is as follows:
<ul>
<li>Work? I am currently unemployed.
Here's a list of things that I have
done though:
<ol>
<li>Farm Hand</li>
<li>Excersize Rider</li>
<li>Curator's Assistant</li>
<li>Teaching Assistant</li>
<li>Telephone Operator</li>
</ol>
</li>
<li>Education? I have dropped out of the
following institutions:
<ol>
<li>
Highschool (I did complete all
courses and receive credit)
</li>
<li>
College (I withdrew for
medical reasons)
</li>
</ol>
</li>
<li>Interests? Here are a select few:
<ol>
<li>Running</li>
<li>Martial arts</li>
<li>Equestrian activities</li>
<li>Video games</li>
</ol>
</li>
<li>Favorite Quotes
<ol>
<li>"This was a triumph"</li>
<li>
"It's not safe to go alone,
here, take this!"
</li>
<li>
"Our princess is in
another castle!"
</li>
</ol>
</li>
</ul>
However, the lesson throws the following error when I try to submit this code:
Oops, try again. Make sure you have at least one unordered list inside your unordered list of profile sections!
What am I doing wrong?
According to the error,
Oops, try again. Make sure you have at least one unordered list inside your unordered list of profile sections!
you need one unordered list inside your unordered list of profile sections. Currently, all of your internal lists are ordered lists (<ol>). Try turning one of them into a <ul>.
For example, this should match your error desciption:
<ul>
<li>Work? I am currently unemployed.
Here's a list of things that I have
done though:
<ul> <!--(Unordered List!)-->
<li>Farm Hand</li>
<li>Excersize Rider</li>
<li>Curator's Assistant</li>
<li>Teaching Assistant</li>
<li>Telephone Operator</li>
</ul>
</li>
<li>Education? I have dropped out of the
following institutions:
<ol>
<li>
Highschool (I did complete all
courses and receive credit)
</li>
<li>
College (I withdrew for
medical reasons)
</li>
</ol>
</li>
<li>Interests? Here are a select few:
<ol>
<li>Running</li>
<li>Martial arts</li>
<li>Equestrian activities</li>
<li>Video games</li>
</ol>
</li>
<li>Favorite Quotes
<ol>
<li>"This was a triumph"</li>
<li>
"It's not safe to go alone,
here, take this!"
</li>
<li>
"Our princess is in
another castle!"
</li>
</ol>
</li>
</ul>
So, I have an ordered list that has an unordered list within it, like so:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game</li>
<li>
<ul>
<li>Controls for single player mode:</li>
<li>
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:</li>
<li>
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ul>
</li>
</ol>
Unfortunately, it outputs this:
I embedded the additional lis as otherwise it failed W3C validation. The Validator complained about sticking <ul> elements inside of <ol> elements otherwise.
How do I fix this so that the list symbols in front of the items will go away?
Just don't create a new li to embed your nested uls, but add them to the existing li. Like this:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game
<ul>
<li>Controls for single player mode:
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ul>
</li>
</ol>
Since ordered and unordered lists are block-level elements in HTML, they will wrap to the next line by default, so there's even no need to create additional divs or insert line breaks.
Is this what you want? You put nested lists inside of the li:
<ol>
<li>Choose which type of game you want to play</li>
<li>Press the spacebar to start the game</li>
<li>Controls for single player mode:
<ul>
<li>W and S</li>
<li>↑ and ↓</li>
<li>A and Z</li>
<li>' (apostrophe) and / (forward slash)</li>
</ul>
</li>
<li>Controls for double player mode:
<ul>
<li>The right player uses A and Z</li>
<li>The left player uses ' and /</li>
</ul>
</li>
</ol>
I have the following HTML:
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>
History
</li>
<li>
Contact
<ul>
<li>
Email
</li>
<li>
Phone
</li>
</ul>
</li>
</ul>
</li>
<li>
FAQ
</li>
</ul>
I want to be able to select nodes based on part of the a tag href using an XPATH expression.
I don't have the full href, only the last part.
So say I want to find the node that links to "History.aspx" I would use something like:
//#href()[. = 'History.aspx']
It looks like you want //a[contains(#href, 'History.aspx')] to get the entire anchor node. if you want just the href path, then //a[contains(#href, 'History.aspx')]/#href.
Hope that helps.
I'm new with jsTree and I would like to create a tree starting from a <ul> and <li> list inside my HTML page. This using html_data plugin (I hope it's the right way).
I'm wondering: which is the correct way to write in HTML the data that will be turned into a tree by jsTree?
jsTree documentation suggests this one:
<li>
Node title
<!-- UL node only needed for children - omit if there are no children -->
<ul>
<!-- Children LI nodes here -->
</ul>
</li>
But it doesn't specify where to put the id attribute that jsTree uses to refer to the data.
Moreover it doesn't seem to work so well. I've seen someone who embeds that code with a <div> and a <ul> tags. For instance:
<div id="categories">
<ul>
<li>Category 1
<ul>
<li>SubCategory 1</li>
<li>SubCategory 2</li>
</ul>
</li>
<li>Category 2</li>
</ul>
</div>
Note that the id in the div tag.
Is this a correct way?
For me it seems not so comfortable using <a href="#"> tags only to write the text of a node... And if I use a <span> I loose the item icon...
Hope someone has a clearer head than mine.
This seems to be the pattern used by jsTree to draw the tree:
<div id="mytree">
<ul>
<li>
Node 1
<ul>
<li>
Node 1.1
</li>
<li>
Node 1.2
<ul>
<li>
Node 1.2.1
</li>
</ul>
</li>
</ul>
</li>
<li>
Node 2
</li>
</ul>
</div>
That is each node has the structure recommended by jsTree documentation:
<li>
Node title
<!-- UL node only needed for children - omit if there are no children -->
<ul>
<!-- Children LI nodes here (recursively apply the same pattern)-->
</ul>
</li>
And all the structure must be wrapped with (what documentation doesn't say):
<div id="mytree">
<ul>
<!-- all the tree here -->
</ul>
</div>