is it possible to have <li> numbers like this?:
1.1 First Item
1.2 Second Item
2.1 Other item
The proper way to do it is by using the CSS counter-increment property.
You could set sections and sub-sections as "Section 1", "1.1", "1.2", etc.
http://www.w3schools.com/cssref/pr_gen_counter-increment.asp
<style>
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }
</style>
<ol>
<li>First level</li>
<li>First level 2
<ol>
<li>Second level</li>
<li>Second level 2
<ol><li>Third level</li></ol>
</li>
</ol>
</li>
</ol>
Another great explanation:
http://www.impressivewebs.com/css-counter-increment/
You can use CSS generated content and counters, however guess which browser doesn't support it...
If you need general support you'll need do it server-side or with JavaScript.
http://www.w3.org/TR/CSS21/generate.html
http://www.evotech.net/blog/2009/05/css-content-counter-increment-counter-reset/
This page lists all the available list style types in HTML (along with browser compatibility):
http://www.quirksmode.org/css/lists.html
As you can see, sub-pointed numbers are not a supported option, so if you want to do it exactly as you've suggested, then you'll have to do it manually - either plain text or javascript or possible using CSS before: (this last option could have been my preferred choice, except that it won't work in older versions of IE)
Alternatively, just accept that HTML doesn't support it, and go with an alternative numbering scheme that is supported. Using nested lists will allow you to have the outer list numbered 1,2,3, etc while the inner list is numbered I, II, III, IV, etc.
Hope that helps.
Just for fun, this little jQuery snippet
$("ol").each(function(i) {
$(this).children("li").not(":has(ol)").each(function(n, el) {
$(this).prepend("<span>" + i + "." + (n+1) + " </span>");
});
});
produces the desired effect, but only works with 2 levels given this type of layout:
<ol>
<li>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>
</li>
<li>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
</li>
<li>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
</li>
</ol
Related
Hi I am try to amke regexp which extract only li tags in ul tags (no ol)
Text:
<ul><li>some text</li></ul>
<ol><li>some text</li></lo>
Extracted
<ul>**<li>**some text</li></ul>
<ol><li>some text</li></lo>
Could you help me ?
Solution 1
Regex solution
/(?<=<ul>\s*(?:<li>.*?<\/li>\s*)*)<li>.*?<\/li>/gi
Demo
If you work in a team and someone else may read your code I advise you to use Solution 2. It's more simple and easy to understand by code reading.
Solution 2
Do it in 2 steps:
Delete all <ol>...</ol> nodes;
Take all <li>...</li> nodes.
*I assume your html is valid and you have no <li> outside <ul> or <ol>.
Code example in JavaScript:
let html = `
<ul>
<li>take this node 1</li>
<li>take this node 2</li>
</ul>
<ol>
<li>exclude this node</li>
<li>exclude this node</li>
</ol>
<ul>
<li>take this node 3</li>
<li>take this node 4</li>
</ul>
<ol>
<li>exclude this node</li>
<li>exclude this node</li>
</ol>
`;
let htmlWithoutOl = html.replace(/<ol>.*?<\/ol>/gis, '');
let matches = htmlWithoutOl.matchAll(/<li>.*?<\/li>/gis);
for (const match of matches) {
console.log(match[0]);
}
Assume the following ordered list in html, using roman numerals
<ol type="I">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li value="1984">big brother</li>
</ol>
Which renders as:
I. one
II. two
III. three
IV. four
MCMLXXXIV. big brother
Is there a way, given an arbitrary element, to extract from its properties the string used to prefix that element?
For example, given the fourth element, is there something I could do to get the string IV? Or given the last element, getting the string MCMLXXXIV?
You would need to write a romanize function. If I am understanding your question correctly.
It would help to have the index of the list item as a value or data-element.
Here is a fiddle
$("li").each(function(){
if ($(this).text() === 'big brother') {
alert(romanize($(this).val()));
}
});
function romanize (num) {
if (isNaN(num))
return NaN;
var digits = String(+num).split(""),
key = ["","C","CC","CCC","CD","D","DC","DCC","DCCC","CM",
"","X","XX","XXX","XL","L","LX","LXX","LXXX","XC",
"","I","II","III","IV","V","VI","VII","VIII","IX"],
roman = "",
i = 3;
while (i--)
roman = (key[+digits.pop() + (i * 10)] || "") + roman;
return Array(+digits.join("") + 1).join("M") + roman;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol type="I">
<li value="1">one</li>
<li value="2">two</li>
<li value="3">three</li>
<li value="4">four</li>
<li value="1984">big brother</li>
</ol>
As seen here
I'm trying to create a recursive list using Thymeleaf. I'm using a simple Java object to model a node which has has two fields, a description and then an array list of child nodes. I'm using the following HTML/Thymeleaf to process the structure but it isn't recursively iterating through to the next level down.
My Java code looks as follows:
public class Node {
public String description;
public ArrayList<Node> children;
}
My Thymeleaf/HTML code is as follows:
<html>
...
<body>
<div th:fragment="fragment_node" th:remove="tag">
<ul th:if="${not #lists.isEmpty(node.children)}" >
<li th:each="child : ${node.children}"
th:text="${child.description}"
th:with="node = ${child}"
th:include="this::fragment_node">List Item</li>
</ul>
</div>
</body>
</html>
If my data structure looks as follows:
Main node 1
Child node 1
Child node 2
Main node 2
Child node 3
Child node 4
I'd expect to get:
<ul>
<li>Main Node 1</li>
<li>
<ul>
<li>Child node 1</li>
<li>Child node 2</li>
</ul>
</li>
<li>Main Node 2</li>
<li>
<ul>
<li>Child node 3</li>
<li>Child node 4</li>
</ul>
</li>
</ul>
However, I only get:
<ul>
<li>Main Node 1</li>
<li>Main Node 2</li>
</ul>
Can anyone spot why this may not be working?
The cause of the problem is
You are trying to th:text and trying to add the description to a <li> as well as you are trying to th:include the fragment inside the same tag <li>.
Your th:include is replaced by the th:text as th:text is processed with priority by default.
Direct solution to your source code
.....
<li th:each="child : ${node.children}" th:inline="text" th:with="node = ${child}">
[[${child.description}]]
<ul th:replace="this::fragment_node">List Item</ul>
</li>
.....
Even thought the above will work as you want, personally I find some design issues in your thymeleaf page.
Better solution using fragment parameters
...
<ul th:fragment="fragment_node(node)" th:unless="${#lists.isEmpty(node.children)}" >
<li th:each="child : ${node.children}" th:inline="text">
[[${child.description}]]
<ul th:replace="this::fragment_node(${child})"></ul>
</li>
</ul>
...
How can i display custom ordered list ? Is it possible to get below output
Tour 1: Hello
Tour 2: Whats up ?
Tour 3: Bye
Tour 4: Test Tour
You can use CSS counters and content to prepend a word to an increment. Demo
HTML
<ol>
<li>Hello</li>
<li>Whats Up</li>
<li>Bye</li>
<li>How Are You</li>
</ol>
CSS
ol {
counter-reset: tour;
}
li:before {
counter-increment: tour;
content: "Tour " counter(tour) ": ";
}
Output
Tour 1: Hello
Tour 2: Whats up ?
Tour 3: Bye
Tour 4: Test Tour
Explanation
Using counter-reset sets the <ol> counter to your counter tour
Every <li> increments tour with counter-increment
Set the content of the pseudo element :before to "Tour " + counter value + ": "
You can use a pseudo element to do this effect, but I'm not sure as far as the colon goes:
<ol class="tour">
<li>First thing's first</li>
<li>Second's the best</li>
<li>Why not third?, Because I though it was the best.</li>
<li>How about fourth?</li>
</ol>
And the CSS (margins would need to be tweaked to your liking - although you could probably use positioning to achieve the same thing):
ol.tour li:before {
content:"Tour";
margin-left:-60px;
margin-right:30px;
}
ol.tour{
margin-left:40px;
}
Example Fiddle: http://jsfiddle.net/n4s8fo2q/
This question already has answers here:
Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?
(12 answers)
Closed 5 years ago.
how I can formate my text displayed in HTML like these:
1.1 cdashjkfhkdvfsdfjkvnjk
cnzxjkvnkncjkvjkxcvbkcbvk
1.2 cnzxjknvjn jvnxcjkcxcx
klczxkcnzxnclnxknckxnk
1.3 ....
and not like these:
1. cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk cnzxjkvnkncjkvjkxcvbkcbvk
cnzxjkvnkncjkvjkxcvbkcbvk cnzxjkvnkncjkvjkxcvbkcbvk cnzxjkvnkncjkvjkxcvbkcbvk cnzxjkvnkncjkvjkxcvbkcbvk
2. cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk
Any ideas????
Use an ordered list.
<ol>
<li>cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
<li>cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
</ol>
<ol>
<li>cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
<li>cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
</ol>
Edit:
If you don't care about IE6 the following will work =P
body {
counter-reset:section;
}
ol {
counter-increment:section;
counter-reset:subsection;
}
li:before {
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
Output:
1.1 cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
1.2 cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
2.1 cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
2.2 cdashjkfhkdvfsdfjkvnjk cnzxjkvnkncjkvjkxcvbkcbvk </li>
http://jsfiddle.net/73vp5naf/
Browser's won't do decimals for you as far as I know.
You could use two ordered lists, one inside the other, and have the inner one with letters or roman numerals?
E.g.
<ol>
<li>Part 1</li>
<ol>
<li>Child 1 of Part 1</li>
<li>Child 2 of Part 1</li>
</ol>
<li>Part 2</li>
<ol>
<li>Child 1 of Part 2</li>
<li>Child 2 of Part 2</li>
</ol>
</ol>