I have a following fragment of XML:
<ul>
<li>xxx
<ul> enter code here
<li>1</li>
<li>2</li>
</ul>
</li>
<li>yyy
<ul>
<li>3</li>
<li>4</li>
</ul>
</li>
and my XPath
(//ul[#class="some-class"][1]//li)[1]
returns as expected xxx, 1, and 2. But when I use
(//ul[#class="some-class"][1]//li)[2]
it returns starting from 1, not yyy as I expect. Please advise.
Try the XPath
//ul[#class='some-class'][1]/li[2]//text()[1]
It gives
yyy
34
as output.
How to handle the spaces is another thing...
(//ul[#class="some-class"][1]//li)[1]
when you use //li, this means all the descent of ul tag.
<ul>
<li>xxx # the 1st li tag
<ul> enter code here
<li>1</li> # the 2st li tag
<li>2</li> # the 3st li tag
</ul>
</li>
<li>yyy # the 4st li tag
<ul>
<li>3</li> # the 5st li tag
<li>4</li> # the 6st li tag
</ul>
</li>
you should use (//ul[#class="some-class"][1]/li)[1]
/li means the child of ul tag.
<ul>
<li>xxx # the 1st li tag
<ul> enter code here
<li>1</li>
<li>2</li>
</ul>
</li>
<li>yyy # the 2st li tag
<ul>
<li>3</li>
<li>4</li>
</ul>
</li>
Related
Is there a way to remove the empty space from just before list (where the blue line is on the picture)? I would be very grateful is somebody could help me with this.
<p class="has-text-align-justify"><b>List:</b>
<ul>
<li> Text1</li>
<li> Text2</li>
<li> Text3</li></ul>
</p>
How it looks
<p class="has-text-align-justify"><b>List:</b>
<ul style="margin-top:-10px;">
<li> Text1</li>
<li> Text2</li>
<li> Text3</li>
</ul>
</p>
Sorry. Forgot to add the changes
I want to show the ul class of li which is clicked.
My html is:
<ul id="level1" class="category">
<li class="level1 inactive">
abc
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
<li class="level1 inactive">
xyz
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
<li class="level1 inactive">
bcd
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
</ul>
the js which I use to show the ul is below:
<script>
var $j = jQuery.noConflict();
$j(function() {
$j('li.level1').click(function() {
$j(this).addClass("current").removeClass("inactive");
$j('ul#level2:visible').hide();
$j('ul#level2').toggle();
});
});
</script>
css:
ul.category li.level1.current a{background:url("../images/left_menu_new.png") no-repeat scroll 10px -285px transparent;}
.active{display:block;}
When I click the li.level1 current class design is added to every li of level1 , ul inside the selected li is opened and as it has anchor tag the page is redirected to the url inside the anchor tag .
What I want is when I click the li the current class should be added only to the selected li & the page of respective url in the anchor tag should be opened and ul of selected li should be opened there.
Kindly guide me to resolve this issue.
For you to achieve this, you will have to take advantage of location hash.
Do the following :
On your anchor tags, that toggle your ul, add href to a dummy unique value. Make sure the value is same as the id of the li you are in.
<ul class="level0">
<li class="level1" id="li1">
Toggle.1
<ul class="level1" style="display:none;">
When ever page loads, read window location hash.
var li = window.location.hash;
If hash is found, show the related ul.
if(li!=""){
$(li + " ul").show();
}
This way you will be able to show the last opened ul by the user.
$(function() {
var li = window.location.hash;
if (li != "") {
$(li + " ul").show();
}
$('li.level1 a').click(function() {
$(this).parent().siblings().each(function() {
$(this).find("ul.level1").hide();
});
$(this).siblings("ul.level1").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="level0">
<li class="level1" id="li1">
Toggle.1
<ul class="level1" style="display:none;">
<li class="level2">Level2.1
</li>
<li class="level2">Level2.1
</li>
<li class="level2">Level2.1
</li>
</ul>
</li>
<li class="level1" id="li2">
Toggle.2
<ul class="level1" style="display:none;">
<li class="level2">Level2.2
</li>
<li class="level2">Level2.2
</li>
<li class="level2">Level2.2
</li>
</ul>
</li>
<li class="level1" id="li3">
Toggle.3
<ul class="level1" style="display:none;">
<li class="level2">Level2.3
</li>
<li class="level2">Level2.3
</li>
<li class="level2">Level2.3
</li>
</ul>
</li>
</ul>
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.