I would like to add few Bootstrap classes to <ul id="markdown-toc">. How can I do it?
Input:
* ToC
{:toc}
Output:
<ul id="markdown-toc">
<li>Welcome</li>
<li>Header 1</li>
</ul>
Add the class name you want to apply as an IAL:
* TOC
{:toc}
{: .this-is-my-class}
Then it will generate:
<ul class="this-is-my-class" id="markdown-toc">
<li>..</li>
</ul>
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]);
}
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>
...
I want to select a specific anchor in a ul so i can manipulate it using css or jQuery. Like in the code below i want to select home only which i have given an id of 'bt1'. How do i select it?
Thank you in anticipation
<div id='TopNav'>
<ul>
<li> <a id='bt1' href=''>Home</a></li>
<li>Contact EHC</li>
<li><a href=''>Student Portal</a></li>
<li><a href=''>Lecturer Portal</a></li>
<li><a href=''>How To Apply</a></li>
<li><a href=''>Student Union</a></li>
<li><a href=''>News</a></li>
<li><a href=''>Tutorials</a></li>
<li><a href=''>Log In</a></li>
<li class='last'><a href=''>Graduation</a></li>
</ul>
You can select it using the unique ID. Just call it out in CSS
#bt1{
...
}
Since IDs should be unique in your document, you can select it directly:
$('#bt1')
or
#bt1{ ... }
I did an ng-repeat on a ul.
Obviously, I cant use nth-child(even) to apply it on ul to change the background-color of the even ul
Anyone knows something similar
ngRepeat exposes the boolean $even and $odd properties, which you can combine with ngClass:
<ul>
<li ng-repeat="item in items" ng-class="{'some-class':$odd}">
{{item.someText}
</li>
</ul>
Note: $even and $odd are based on the currnt $index which is zero-based, so you might need to use $odd instead of $even.
Or you can use the ngClassEven / ngClassOdd directives:
<ul>
<li ng-repeat="item in items" ng-class-even="'some-class'">
{{item.someText}
</li>
</ul>
See, also, this short demo.
Try this out
Working Demo
html
<div ng-app="">
<div ng-init="predicate='name'; reverse=false;">Sort: predicat:{{predicate}} reverse:{{reverse}} </div>
<div ng-click="reverse=!reverse">[change reverse]</div>
<div ng-click="predicate='name'; reverse=!reverse;">[set predicate: name + change reverse]</div>
<div ng-click="predicate='id'; reverse=!reverse;">[set predicate: id + change reverse]</div>
<div ng-init="lines=[{'name':'eee', 'id':7}, {'name':'aaa', 'id':9}, {'name':'ccc', 'id':8}, {'name':'bbb', 'id':2}, {'name':'ddd', 'id':3}]">
<ul ng-repeat="line in lines | orderBy:predicate:reverse" ng-class-odd="'odd'" ng-class-even="'even'">
<li >{{ line.name }}</li>
</ul>
</div>
</div>
Output
the HTML:
<ul id="nav">
<li id="listItem">a list item</li>
<li id="link01">list item with ID</li>
<li id="link02">another link with ID</li>
<li class="lastItem">Contact</li>
<li class="lastItem">the Very Last List Item</li>
</ul>
the JavaScript:
alert($$('.lastItem').getFirst('li').get('text'));
console returns this error:
TypeError: $$(...).getFirst(...).get is not a function
um...whut? what did i miss? if i take out the getFirst(), it works, but returns, of course, both <li> text contents... which i don't want. just want the first...
halp.
WR!
You trying to call getFirst on Elements array($$ return elements array!) the getFirst() method is only on a dom mootools element and it will return his first child
what you are looking for is this:
alert($$('.lastItem')[0].get('text'));