How to create and reference custom heading ids with reStructuredText? - restructuredtext

Currently, if I have:
My header
=========
`My header`_
rst2html Docutils 0.14 produces:
<div class="document" id="my-header">
<h1 class="title">My header</h1>
<p><a class="reference internal" href="#my-header">My header</a></p>
Is it possible to obtain the following ouptut instead:
<h1 class="title" id="my-custom-header">My header</h1>
<p><a class="reference internal" href="#my-custom-header">My header</a></p>
So note how I want two changes:
the id to be inside the heading, not on a separate div
control over the actual id
The closest I could get was:
<div class="document" id="my-header">
<span id="my-custom-header"></span>
<h1 class="title">My header</h1>
<p><a class="reference external" href="my-custom-header">My header</a></p>
but this is still not ideal, as I now have multiple ids floating around, and not inside the h1.
Asciidoc for example has that covered with:
[[my-custom-header]]
== My header
<<my-custom-header>>

Related

Is it possible to to get an empty string in a list when there is no element, using CSS selector?

I want to scrape some items, which are on the same page, using Scrapy.
HTML looks like this:
<div class="container" id="1">
<span class="title">
product-title1
</span>
<div class="description">
product-desc
</div>
<div class="price">
1.0
</div>
</div>
I need to extract name, description and price.
Unfortunately, sometimes product doesn't have the description and HTML look like this:
<div class="container" id="2">
<span class="title">
product-title2
</span>
<div class="price">
2.0
</div>
</div>
Currently I am using CSS selectors which returns list of all elements existing on the website:
title = response.css('span[class="title"]').extract()
['product-title1', 'product-title2', 'product-title3']
description = response.css('div[class="description"]').extract()
['desc1','desc3']
price = response.css('div[class="price"]').extract()
['1.0','2.0','3.0']
Is it possible to get for example an empty string in place of missing 'desc2' when description object isn't there, using CSS selector?
I recommend you to rewrite you code:
for section in response.xpath('//div[#class="container"]'):
title = section.xpath('./span[#class="title"]/text()').get(default='not-found') # you can use any default value here or just empty string
desctiption = section.xpath('./div[#class="description"]').get()
price = section.xpath('./div[#class="price"]/text()').get()
Check this out..
for section in response.xpath('//div[#class="container"]'):
title = section.xpath('./span[#class="title"]/text()').get()
desctiption_tag = section.xpath("//div[contains(#class,'description')]")
if desctiption_tag:
desctiption = section.xpath('./div[#class="description"]').get()
else:
desctiption = "String"
price = section.xpath('./div[#class="price"]/text()').get()

webdriver select first sibling based on nth sibling condition

i'm writing a test case in a grid based software
I'm mostly using css selectors to select elements and perform clicking
based on the image - I'm selecting the right circled element (base don a css class that displays the blue dot ), now, based on this condition, I want to select the first sibling element - which is a "plus", basically that would open the sub grid further and allow me to run further testing
I can't seem to be able to do that -
assuming that I'm using the following sample html
<div class="td">
<a class="opener">
....
</a>
</div>
<div class="td">
...
</div>
<div class="td">
...
</div>
<div class="td">
...
</div>
<div class="td">
...
</div>
<div class="td">
<a class="round-solid">
...
</a>
</div>
I can select "round-solid" - based on this, how do I select "opener" element ?
I only want the opener element for which a specific column contains the "round-solid" class
That should do the trick:
driver.findElement(By.xpath("//a[#class='round-solid']/../preceding-sibling::div/a[#class='opener']"));

Using regular expressions in a css selector

Im scraping a page using Kimono and Ive come across some data that is structured as below.
The issue is that all of the data is stored in an element called <div class="agents-stats-seperator"> some entries only have one of these elements, some have up to 4.
There is different data in each of them that im trying to scrape and the only structured differential between them is the Text, either :
Residential for sale:
Residential for rent:
Commercial for sale:
Commercial for rent:
Im Kimono you have the option to define what you want to select either by css path or regex.
At the moment im defining with the below :
div > div > div > div.agents-stats-seperator > div
/^()(.*?)()$/
Which is causing an issue as it picking up all the <div class="agents-stats-seperator"> elements, what ive been stuck on is how to set the regular expression to target jsut the elements that contain the text Residential for sale:
Ive tried using :
div > div > div > div.agents-stats-seperator > div [str="Residential to rent:"]
/^()(.*?)()$/
But to no avail, any ideas ?
For reference here is a snippet of the html
<div class="clearfix top agents-stats bg-muted">
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Residential for sale:
<strong>14</strong>
</div>
<div class="agents-stats-c">
Avg. asking price:
<strong class="price">£447,143</strong>
</div>
<div class="agents-stats-r">
Avg. sale listing age:
<span>18 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Residential to rent:
<strong>9</strong>
</div>
<div class="agents-stats-c">
Avg. asking rent:
<strong class="price">£1,660 pcm</strong>
</div>
<div class="agents-stats-r">
Avg. rental listing age:
<span>3 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Commercial for sale
<strong>1</strong>
</div>
<div class="agents-stats-c">
Avg. asking price:
<strong class="price">£700,000</strong>
</div>
<div class="agents-stats-r">
Avg. sale listing age:
<span>11 weeks</span>
</div>
</div>
<div class="agents-stats-seperator">
<div class="agents-stats-l">
Commercial to let
<strong>1</strong>
</div>
<div class="agents-stats-c">
Avg. asking rent:
<strong class="price">£22,516 pa</strong>
</div>
<div class="agents-stats-r">
Avg. rental listing age:
<span>56 weeks</span>
</div>
</div>
</div>
Try something like :
div:nth-child(1).agents-stats-seperator > div:nth-child(1).agents-stats-l > strong > a

Rename multiple css with identical name

I'm working inside a templated system where i can implement code, but i can't modified the core of the file. My layer are stacked like this:
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
<div class="layer1">
<div class="layer2">
<div class=" layer3">
<div class="layer4">
</div>
</div>
</div>
</div>
As you can see, my class all have the same name (layer1, layer2, etc...). I want to know if there's a way by using Javascript, Jquery or any other online client side library to modify the CSS class name so, for example, the first layer1 become level1 and the following layer1 become level 2?
Thank for your answer!
As other people already said, jQuery actually does what you want.
As long as you don't know the number of “layers” you have, you better find all elements by classname substring:
$('*[class^="layer"]')
Then you can get the list of the element classes and change old names to new ones.
Many different ways to do this:
Solution 1:
Use addClass() and removeClass()
$(".layer1").removeClass('old_class').addClass('new_class');
Replace old_class with your older class and new_class with your new class
Solution 2:
If you are able to get the element by ID
You can set the class by using .attr()
$("#id").attr('class', 'new_class');
an all around solution working with className :
var elem=document.querySelectorAll('[class^="layer"]') ;
for(i in elem){
x = elem[i].className;
var y=x.replace("layer" , "level");
elem[i].className=y||x;
}

Stars and aggregated rating are not shown when using schema.org markup and and Review in xhtml page

I'm trying to implement schema.org's microData format in my xhtml template.
Since I'm using xhtml templates, I needed to add
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
instead of:
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
otherwise my template wouldn't be parsed. I found the solution here
My markup looks like this:
<div itemscope="itemscope" itemtype="http://schema.org/Place">
<div itemprop="aggregateRating" itemscope="itemscope"
itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">#{company.meanRating}</span> stars -
based on <span itemprop="reviewCount">#{company.confirmedReviewCount}</span> reviews
</div>
<ui:repeat var="review" value="#{company.reverseConfirmedReviews}">
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
<span itemprop="name">Not a happy camper</span> -
by <span itemprop="author">#{review.reviewer.firstName}</span>,
<div itemprop="reviewRating" itemscope="itemscope" itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">#{review.text} </span>
</div>
</ui:repeat>
</div>
When testing this in http://www.google.com/webmasters/tools/richsnippets I'm not getting any stars back or aggregated review count
What am I doing wrong here?
Yes!!
The problem actually consisted of two errors, first somebody had named the div class to
"hReview-aggregate" which is appropriate when you implement Microformats not
Microdata
The second error was that I misunderstood the specification of schema.org.
This is how I end up doing:
<div class="box bigBox" itemscope="itemscope" itemtype="http://schema.org/LocalBusiness">
<span itemprop="name">#{viewCompany.name}</span>
<div class="subLeftColumn" style="margin-top:10px;" itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
<div class="num">
<span class="rating" id="companyRating" itemprop="ratingValue">#{rating}</span>
</div>
<div>Grade</div>
<div class="num">
<span class="count" id="companyCount" itemprop="reviewCount">
#{confirmedReviewCount}
</span>
</div>
</div>
</div>
Hope this helps!!!!!
hey checkout how holidayhq guys have done it for this url : www.holidayiq.com/destinations/Lonavala-Overview.html
you can check there snippet on this tool : http://www.google.com/webmasters/tools/richsnippets
and google out this keyword "lonavala attractions" and you will see the same snippet, they have used microdata to generate this reviews in snippet, they have used typeof="v:Review-aggregate" and much more tags, have a look at it, its nice implementation of the reviews in snippet kind of work.

Resources