I am working on an ebook that contains many nested lists (both OL and UL) and one page is not valid. I wish to keep them as lists for semantic and organizational reasons. Here's the format I am going for:
Question
Subquestion
Subquestion
Paragraph explaining answers
Question
Subquestion
Subquestion
Paragraph explaining answers
H2 Section break
Question
Subquestion
Subquestion
Paragraph explaining answers
Question
Subquestion
Subquestion
Paragraph explaining answers
And my abbreviated code:
<ol>
<li>Question 1
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
</li>
<p>Paragraph explaining answers</p>
<li>Question 2
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
</li>
<p>Paragraph explaining answers</p>
<h2>Section break</h2>
<li>Question 3
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
</li>
<p>Paragraph explaining answers</p>
<li>Question 4
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
</li>
<p>Paragraph explaining answers</p>
</ol>
Now this looks great in-browser, except I get an tag mismatch error on the last line (the closing ol tag), preventing anything after the ordered list from displaying. I am not allowed to break format (ie put all paragraphs at the end of the OL) and would rather not simply use numerals for the OL.
Are paragraph and header tags not allowed nested inside lists? Is there a workaround to keep numbering and formatting consistent? Thanks for your help!
You can't put anything in an ol but li as detailed here. You would be best off doing it like this:
<ol>
<li>Question 1
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
</li>
</ol>
<p>Paragraph explaining answers</p>
<ol>
<li>Question 2
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
</li>
</ol>
<p>Paragraph explaining answers</p>
<h2>Section break</h2>
<ol>
<li>Question 3
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
</li>
</ol>
<p>Paragraph explaining answers</p>
<ol>
<li>Question 4
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
</li>
</ol>
<p>Paragraph explaining answers</p>
What #phantom said isn't entirely true. You can "embed" a para in a list item. Where your original example breaks down is that you cannot have a heading within a ordered list; that is what is not permitted.
Here's what you should do:
<ol>
<li>Question 1
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
<!-- The following places the paragraph within the <li> element,
giving it a paragraph space/line break above and no bullet. -->
<p>Paragraph explaining answers</p> <!-- para wrapped in the -->
</li> <!-- close the list item. -->
<li>Question 2
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
<p>Paragraph explaining answers</p>
</li>
</ol> <!-- End the ordered list since it cannot contain a heading tag -->
<h2>Section break</h2>
<ol>
<li>Question 3
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
<p>Paragraph explaining answers</p>
</li>
<li>Question 4
<ul>
<li>subquestion</li>
<li>subquestion</li>
</ul>
<p>Paragraph explaining answers</p>
</li>
</ol>
Related
I'm trying toy get the first ul tag after the tag h4 and skipping the div tags:
<h4>
<a>
"Q1. some text"
</a>
</h4>
<ul>
<li>answer</li>
<li>answer</li>
<li>answer</li>
</ul>
<h4>
<a>
"Q2. Some text"
</a>
</h4>
<ul>
<li>answer</li>
<li>answer</li>
<li>answer</li>
</ul>
<h4>
<a>
"Q2. Some text"
</a>
</h4>
<div>WITH OTHER INFO THAT i DON'T WANT</div>
<ul>
<li>answer</li>
<li>answer</li>
<li>answer</li>
</ul>
<h4>
<a>
"Q2. Some text"
</a>
</h4>
<div>WITH OTHER INFO THAT i DON'T WANT</div>
<ul>
<li>answer</li>
</ul>
<ul>
<li>DONT NEED THIS</li>
</ul>
<ul>
<li>DONT NEED THIS</li>
</ul>
And this code is mostly like this a bunch of times so I need to pick just the first ul tag after the h4 and skipping the div tags with nokigiri and ruby.
require 'nokogiri'
doc = Nokogiri.HTML(DATA)
You want to use either the following-sibling or following axis, and specify the first matching ul:
doc.xpath('//h4/following-sibling::ul[1]')
I'm trying to make the following:
<div>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
Here's what I've tried.
div
- #my_list.each_with_index do |element, index|
- if element % 4 == 0
ul
li
Element
Unfortunately, the li is created under div instead of ul, how can I achieve the results?
You should use each_slice() :
div
- [1,2,3,4,5,6,7,8].each_slice(4) do |elems|
ul
- elems.each do |e|
li = e
Generate this html:
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
I would split the list into two lists for printing.
eg. #my_list.take(4) and #my_list.drop(4)
And then pass each list to a partial so they can use the same markup.
I'm using awesome_nested_set in my rails app...in my view I'm displaying my nested categories using each_with_level. How do I determine if the category I'm displaying in the loop is the first in the level.
My list displays like this:
<ul>
<li>Gifts
<ul>
<li>Kitchen
<ul>
<li>Mugs</li>
<li>Plates</li>
</ul>
<li>Bath</li>
<li>Home
<ul>
<li>Canvas Prints</li>
<li>Framed Prints</li>
</ul>
</li>
</ul>
</li>
<li>Blankets
<ul>
<li>Fleece</li>
<li>Cotton</li>
</ul>
</li>
</ul>
In this example I would like to tag the "Gifts", "Kitchen", "Mugs", "Canvas Prints", and "Fleece" entries. It seems that there should be a method to determine this, but I couldn't find any documentation on it online. Thanks for any help!
If you don't need the code to know which is first, a CSS selector should be able to do the trick: li:first-child.
Markup:
<ul>
<li>
<ul id="ratx">
<li>Location</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Services</li>
<li class="bar"><span></span></li>
<li class="value">5</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Facilities</li>
<li class="bar"><span></span></li>
<li class="value">3</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Room Cleanliness</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Value for Money</li>
<li class="bar"><span></span></li>
<li class="value">1</li>
</ul>
</li>
</ul>
I want to represent User Ratings dynamically using JQuery so I made a function like this,
jQuery:
$("ul#ratx").each(function(index) {
var val = $(this).children(".value").text();
var barval = val * 40;
/* compute ratings */
$("li.bar span").css("width", barval);
});
Now, when I alert barval I get all 5 values but when I try to apply the "compute ratings" line, all it does is apply the last value that it finds. How should I go about this?
Sorry if the question is a confusing. I am not quite sure how to phrase everything.
The problem is that, while interating through each elements it find, it is applying a common value to all li.bar span. You should represent a single element, you are trying to apply to.
$(this).children("li.bar span").css("width", barval);
Update
Here is a working Demo
The snippet that worked was
$(this).find("li.bar").children("span").css("width", barVal );
Also, I changed the display property of the span to display: inline-block;
You are setting the css for all the elements in the set $("li.bar span"). So at the end, they all have the same width of the last parsed value.
Without seeing you markup, it's difficult to propose you a code solution though.
Guys i have an requirement in which i have items in jquery sortable. but i also want the child item of the parent to be moved along with the parent.for example when i drag the item1 in the browser , the sub item1,2,3 should be moved along with them and dropped .
kindly let me know ,if there is any possibility through UI.
<ul>
<li>
<p> item 1</p>
<ul>
<li>
Sub item 1
</li>
<li>
Sub item 2
</li>
<li>
Sub item 3
</li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>
You could apply a class or id to the first ul and only apply sortable to that unordered list:
HTML:
<ul id="sortable">
<li>
<p> item 1</p>
<ul>
<li>
Sub item 1
</li>
<li>
Sub item 2
</li>
<li>
Sub item 3
</li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>
JavaScript:
$("#sortable").sortable();
This way, the inner uls are not sortable.
Working example: http://jsfiddle.net/andrewwhitaker/Ds7ds/