I have a scenario in which when li comes under ul I need to replace it with a dot(.) and when li comes and ol I need to replace it with a number.
But the problem is-
1) It is not doing for nested li
2) It is appending at the same level. Same level means as soon as it finds li it will first add dot(.) and then it will add number.
What I want
1) Whenever li comes inside ul it should add dot(.).
2) Whenever li comes inside ol it should add a number.
data = "<ol>\n<li>Introduction\n<ol>\n<li>hyy ssss</li>\n</ol>\n</li>\n<li>Description</li>\n<li>Observation</li>\n<li>Results</li>\n<li>Summary</li>\n</ol>\n<ul>\n<li>Introduction</li>\n<li>Description\n<ul>\n<li>Observation\n<ul>\n<li>Results\n<ul>\n<li>Summary</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Overview</li>\n</ul>\n<p>All the testing regarding bullet points would have been covered with the above content. Hence publishing this content will make an entry in in the selected page, cricket page and so on.</p>\n"
content = Nokogiri::HTML.parse(data)
content.at('ul').children.xpath("//li").each { |li| li.inner_html="\u2022 "+li.inner_html }
content.at('ol').children.xpath("//li").each_with_index { |li,index| li.inner_html="#{index} "+li.inner_html }
Perhaps you need this:
content.css('ol').reverse.each do |ol|
ol.css('> li').each_with_index { |li,index| li.inner_html="#{index + 1} "+li.inner_html }
end
content.css('ul > li').reverse.each { |li| li.inner_html="\u2022 "+li.inner_html }
puts content
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body>
<ol>
<li>1 Introduction
<ol>
<li>1 hyy ssss</li>
</ol>
</li>
<li>2 Description</li>
<li>3 Observation</li>
<li>4 Results</li>
<li>5 Summary</li>
</ol>
<ul>
<li>• Introduction</li>
<li>• Description
<ul>
<li>• Observation
<ul>
<li>• Results
<ul>
<li>• Summary</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>• Overview</li>
</ul>
</body></html>
Reason of doing reverse -
Consider the dom:
<ul>
<li>Description
<ul>
<li>Observation</li>
</ul>
</li>
</ul>
When you do content.css('ul > li'), you get in order of [description, observation]. Without reverse, when you run the snippet, you change the description, but doing so will also change the object_id of observation node. Then you changed the observation node which is not referenced anywhere in content. That's why, I reversed it and acquired children before parents. By doing this, I made sure I'm changing the child first and then changed the parent so parent was aware of the change in child and there is no unreferenced node anywhere.
Suppose description's node id is 1234 and observation node_id is 2345. When you mutated description, it changed itself but also changed it's child(2345). New object id can be 3456 and 4567 respectively. Then you changed 2345 (by iteration), but it makes no effect because your content is showing 3456 -> 4567
Hope this makes sense.
Related
In thymeleaf, I have a for each loop like so:
<ul class="days">
<li th:each="day : ${days}" th:text="${day}" >1</li>
</ul>
This successfully lists all of the strings in an array called days which is populated like ["1","2","3"..."31"] representing the days in a given month.
I also have an array of items which also contains days as strings.
Here is what I want to do in pseudo code but am struggling to figure out how to achieve it:
For each day in days; For each day in items ; if items.day =
days.day then set 'class=active' (bootstrap) and th:text =days.day
else
th:text=days.day
So if theres a day in items that matches a day in days then the <li> element is set to class=active and make the <li> clickable with href="/myurl". And either way the day from days is the th:text of the <li>.
Sorry if thats hard to understand, I tried to make it as clear as I could.
EDIT:
This is latest attempt:
<ul class="days">
<li th:each="s : ${days}" th:with="found=${false}">
<span th:each="item : ${items}" th:if="{$item.day == s}">
<span th:text="${s}" th:classappend="active" th:href
th:with="${found} = true"></span>
</span>
<span th:if="{$found == false}">
<span th:text="${s}"></span>
</span>
</li>
</ul>
I think you can achieve this with conditional expressions. Simply write something like
<span th:text="${s}" th:classappend="${#lists.contains(items, s)}? 'active' : ''">
This code also uses #lists, a very useful feature of Thymeleaf.
I am building a sidebar navigation dynamically and I have the following issue:
Option 1 // add class active
Option 1.1 // add class active
Option 1.1.1 // add class active
Option 1.1.1.1 // add class active
option 1.1.1.1.1 // selected link id = 7 (this is guid in real app)
Option 1.1.2
Option 1.2
Option 2
Option 3
Basically the navigation is in the following format:
<ul>
<li>
link
</li>
<li>
link
<ul>
<li>
link
</li>
</ul>
</li>
</ul>
And here is what I try to do recursively.
#BuildNavigation(Model)
#helper BuildNavigation(IEnumerable<Menu> menu)
{
foreach (Menu item in menu)
{
<li>
#item.Title
#if (item.Items.Any())
{
<ul class="nav sub-menu">
#BuildNavigation(item.Items)
</ul>
}
</li>
}
}
This works fine, the sidebar is built. But how can I add the active classes to the <li> based on the current selection?
I can add a property to the Menu class bool IsActive and then within the view I can check if that menu is active but how can I add the active class to all parents <li> of that selected link?
In my site I have this list:
<ul class="test">
<li class="social_1"></li>
<li class="social_2"></li>
<li class="social_3"></li>
<li class="social_3"></li>
</ul>
My question is: how can I count li in my ul class test
I have tried this:
my_ul = page.find("ul[class='test']")
my_ul.each do |li|
pp li['class']
end
but it doesn't work.
Is there anyway to do something like I coded above?
assuming ul parent element with id=parent .. you can do it like this
list = Array.new
list = find('#parent ul').all('li')
now you can get list size simply
list.size
and you can benefit from having all li's in array to collect text also in each li like this
list = find('#parent ul').all('li').collect(&:text)
I'd advise using the new RSpec 3 syntax for counting elements with Capybara:
it "should have 4 li elements" do
expect(find('ul.text')).to have_selector('li', count: 4)
end
More information here: https://github.com/jnicklas/capybara#querying
Use page.all("ul.test li").size
I have an html template that filters a list by the column property of the objects of that list like so:
<ul>
<li card-view
card-id="state.card"
ng-repeat="state in ctrl.game.states | filter:{column:'backlog'} "
ng-include="cardview.html">
</li>
</ul>
If I modify the column property in one of the elements of that list, the display does not update.
How can I make that happen?
Here's one option that uses an imaginary placeholder tag and avoids the |filter replacing it with an ng-if, but I hope someone has a better answer than this one.
<ul>
<xx ng-repeat="state in ctrl.game.states">
<li card-view
card-id="state.card"
ng-if="state.column == 'backlog'"
ng-include="cardview.html">
</li>
</xx>
</ul>
Doing the ng-if and ng-repeat on the same element didn't work.
We have this nested list:
<ul id="AllTopics" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search topic...">
<li>Polite Phrases<span class="ui-li-count">101</span>
<ul data-role="listview" data-inset="true" >
<li >Polite Phrases<span class="ui-li-count">101</span></li>
<li >At The End Of A Letter/Email<span class="ui-li-count">101</span></li>
</ul>
</li>
</ul>
The first <ul> with the id="AllTopics" is in the html documnet itself,
The inner <li><ul><li>... are loaded from Ajax call like:
on('pageinit'... event
... $("ul").append(...
I can get the event from the first new born <li> , like:
$('#AllTopics').on('click','li',function (event){...
But the inner <li> or <a> do not seem to fire events :-(
Ani ideas ?
Thank's in advance
The problem would be that the new content is loaded using an Ajax call, and you just setup the events before, so the new elements won't have them.
Try using delegate JQuery function:
$('#AllTopics').delegate('li a','click',function(){
alert('How you dare to click on my links?!');
});
EDIT
Other solution is to assign the events once elements are added via Ajax call.
// This is an example, retrieve the data on your own form
$.get('mypage.php',function(data){
// Add content to your DOM elements
$('#AllTopics').append(data);
// Assign events
$('#AllTopics').on('click','li',function (event){
alert('Holy moly, you keep clicking on my links!');
});
});
Note: I just realized that your HTML elements have this composition:
<ul>
<li>
<a/>
</li>
<span/>
<ul>
<li>
</a>
</li>
</ul>
</ul>
So, OF COURSE that is only affecting the first one because there are two levels of li - a (you have an ul element inside another one). You can define an ID for your second group of li - a elements to trigger events successfully or keep doing it in this way:
$('#AllTopics').delegate('li a','click',function(){
alert('How you dare to click on the first link?!');
});
$('#AllTopics').delegate('ul li a','click',function(){
alert('Stop clicking my children links!');
});