In Sightly on using ol inside ul tag. All the tags are closing in proper way.
But whene I am using Ul inside ul(nested ul) all tags are closing at the end not in proper place.
So can any one suggest me. How can I use nested ul in Sightly.
The mark up is 'correcting itself', that is to say that the li and ul tags close off within the enclosing div and hence no closing li of ul tags remain. However any text or self contained tags (tags opened and closed within the div) will show as you might expect.
Consider re-writing the Sightly code so that it wraps around the full <li>...</li> or <ul>...</ul> e.g. something like
<ul class="level-1">
<div data-sly-test="${name =='NODE_OPEN'}" data-sly-unwrap>
<ul class="level-${level}">
<div data-sly-test="${name =='ITEM_BEGIN'}" data-sly-unwrap>
<li>
<a href=#>${title}</a>
</li>
</div>
</ul>
</div>
</ul>
<ul class="level-1">
<div data-sly-test="${name =='NODE_OPEN'}" data-sly-unwrap>
<ul class="level-${level}">
</div>
<div data-sly-test="${name =='ITEM_BEGIN'}" data-sly-unwrap>
<li>
<a href=#>${title}</a>
</div>
<div data-sly-test="${name =='ITEM_END'}" data-sly-unwrap></li></div>
<div data-sly-test="${name =='NODE_CLOSE'}" data-sly-unwrap></ul></div>
</ul>
Related
Assume that following HTML snippet exists somewhere in the <body> element of a web page:
<div id="root_1000" class="root bacon">
<ul>
<li id="item_1234567" class="active">
<div class="userpost author_4281">
<div>This text should be visible.<div>
</div>
<ul><li>Some item</li></ul>
</li>
</ul>
</div>
<div id="root_2000" class="root bacon">
<ul>
<li id="item_8675309" class="active">
<div class="userpost author_3333">
<div>
This text, and as the DIV.root that contains it, should be hidden.
<div>
</div>
<ul><li>Another item</li></ul>
</li>
</ul>
</div>
<div id="root_3000" class="root bacon">
<ul>
<li id="item_7654321" class="active">
<div class="userpost author_9877">
<div>This text should be visible.<div>
</div>
<ul><li>Yet another item</li></ul>
</li>
</ul>
</div>
So here's my question: what would the XPath syntax be to select the div.root that contains info posted by author #3333 (i.e. div[class~="author_3333"])?
The following XPath statement will properly match the div.userpost element associated with author #3333 that I want to hide, but does not include the <ul><li>Another item</li></ul> node, which I also need to hide:
.//div[contains(#class, 'author_3333')]
What I want to do is select the closest div.root ancestor associated with the node that my XPath statement matches. Any help would be greatly appreciated... thanks in advance!
you need to get the parent node that has the second div as its child, something like:
//div[.//div[contains(#class, "author_3333")]]
You can use this XPath expression:
.//div[contains(#class, 'author_3333')]/ancestor::div[contains(#class,'root')][1]
Output is:
<div id="root_2000" class="root bacon">
<ul>
<li id="item_8675309" class="active">
<div class="userpost author_3333">
<div>
This text, and as the DIV.root that contains it, should be hidden.
</div>
</div>
<ul>
<li>Another item</li>
</ul>
</li>
</ul>
</div>
this is my first post
just the site i needed cause im kinda new to all this
im trying to validate my page and there is 1 error that i dont know what to do with
Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
if i remove the div part
my page is not looking the same as it does with it and it works on all browsers right now with the errors
this is the piece of code that is making the error
<div class="picture_content margin-left">
<ul class="image_box_story2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slider1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/slider2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/slider3.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</section>
any help on how to fix this would be apreciated alot
thanks for taking the time
btw i downloaded a bootstrap temp and the Original file has the same errors
The error is
<ul class="image_box_story2">
a ul is a list and can only have li children, not div, that list doesn't have any li children at all.
Perhaps you can change it to <div class="image_box_story2"> (and change (</ul> to </div>) that would make it valid, but whether it displays Ok depends on the css you have not shown.
please help me i cant make my drop down list vertical. when I hover over a list it is horizontal.
my html code
<div id="header">
<div>
<img src="logo.png" alt="LOGO" height="115" width="115px" />
<ul id="navigation">
<li class="active">
Home
</li>
<li>
What We Offer
</li>
<li>
Solutions
<ul>
<li>
Inbound
</li>
<li>
Outbound
</li>
</ul>
</li>
<li>
About
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
css
I can't see your CSS, but did you apply display: inline to both the top-level AND sub-level menu items? This will cause the problem you describe.
The top-level li items should be display: inline, but their children should be display: block.
See this example: https://jsfiddle.net/tLqrrfy0/
I am trying to get scrape a page and get dom elements which is a collection on links with Ruby and Nokogiri. So I have a collection of li's which has a specific attributes in some li's. I need to reject those li;s which has specific attributes and get all the link tags of those li's.
Here is my DOM looks like.
<ul>
<li class="carousel-list-item">
<a itemprop="url" data-cr="CharNav23" class="property-icon property-icon-14" href="/max-and-shred/">
<div itemprop="name" class="property-tooltip">
Max & Shred
</div>
</a>
</li>
<li class="carousel-list-item">
<a itemprop="url" data-cr="CharNav24" class="property-icon property-icon-19" href="/rabbids-invasion/">
<div itemprop="name" class="property-tooltip">
Rabbids Invasion
</div>
</a>
</li>
<li data-sponsor="Sponsor" class="carousel-list-item">
<a itemprop="url" data-cr="CharNav21" class="property-icon property-icon-40" target="_blank" href="http://pubads.g.doubleclick.net/gampad/clk?id=47616903&iu=8675">
<div itemprop="name" class="property-tooltip">
LEGO Friends
</div>
</a>
</li>
<li class="carousel-list-item">
<a itemprop="url" data-cr="CharNav24" class="property-icon property-icon-19" href="/rubyds-investment/">
<div itemprop="name" class="property-tooltip">
Rabbids Invasion
</div>
</a>
</li>
</ul>
I need to collect all a tags whose lis dont have data-sponsor="Sponsor" attributes. I tried like the below but it includes all lis.
page.search('ul.carousel-list > li > a').map{ |link| make_absolute(link['href']) }
The css way to do that is:
page.search('li:not([data-sponsor]) a')
or
page.search('li:not([data-sponsor=Sponsor]) a')
Probably a better option than xpath.
You should try:
# this will give you all ul elements which has no attribute named 'data-sponsor'.
page.search('//ul[#class="carousel-list"]/li[not(#data-sponsor)]/a').map{ |link| make_absolute(link['href']) }
I have the following HTML:
<ul>
<li>
<p class="channel-show-time">Test 1</p>
</li>
<li>
<p class="channel-show-time">Test 2</p>
</li>
<li><span class="channel-show-carousel-label">Next</span>
<p class="channel-show-time">Test 3</p>
</li>
<li>
<p class="channel-show-time">Test 4</p>
</li>
</ul>
I want to select the text in the <p> tags from the preceding li to the li
with span class 'channel-show-carousel-label' so I want the text 'Test 2'.
I have the xpath that selects the text in the <p> tag for the li with the span class, i.e:
xpath=//ul/li/span[#class='channel-show-carousel-label']/../p
Does anyone know how I can achieve this?
You can use the following XPath:
//span[#class="channel-show-carousel-label"]/../preceding-sibling::li[1]/p/text()
It says: find the span with the desired class, go to its parent (li), find the nearest preceding li sibling, go to its p child and return its text.