Nokogiri ccs text selector without children - css-selectors

I have the following html code of which I need to extract the €194,99 using a Nokogiri css selector and I cannot get what I need.
<p class="price price-offer price-len5">
<span class="border">
<span class="price-old">€219,99</span>
€194,99
</span>
</p>
I've tried these selectors without luck:
product.css('.price span:not(.price span span)').text
product.css('.price:not(.price-old)').text
Do you guys have any ideas?
Thnx

That would be:
product.at('.price-old').next.text
or
product.at('.price .border').children[-1].text

Related

How to prevent </p> from ending line

<p>Dostępne: </p><p style={{color:'green'}}>{props.ile_aktywne}</p><p>Niedostępne: </p><p style={{color:'red'}}>{props.ile_nieaktywne}</p>
I want it to format as two lines
"Dostępne: 1"
"Niedostępne: 2"
Don't use a paragraph if you don't want to use it. That's what a <span> or <div> is for.
However, you can modify your HTML here:
<p>Dostępne: <span style="color:green">1</span></p>
<p>Niedostępne: <span style="color:red">1</span></p>
P tag will(If blocked behavior is not changed by CSS or Javascript) always creates a new line because it is a block tag. To get your output you can wrap it with a span tag as it is an inline tag.
<p>Dostępne: <span style={{color:'green'}}>{props.ile_aktywne}</span></p>
<p>Niedostępne: <span style={{color:'red'}}>{props.ile_nieaktywne}</span></p>
and if you want it as an ordered list add autonumbering. You can wrap with ol and replace p tag with li.
<ol>
<li>Dostępne: <span style={{color:'green'}}>{props.ile_aktywne}</span></li>
<li>Niedostępne: <span style={{color:'red'}}>{props.ile_nieaktywne}</span></li>
</ol>
Please check this as reference https://www.w3schools.com/html/html_blocks.asp

Dynamic population of Bootstrap 4 carousel via Angular 4 not displaying images

I am trying to dynamically populate a Bootstrap 4 carousel via an ngFor iterating over an array of strings that contain the image urls. The carousel is not displaying the images, though looking at the markup generated everything looks fine. I'm guessing that the component is rendering before Angular is adding in the divs for each slide, as the "carousel slide" div has a height of 0px, which I think is what is hiding the slides themselves.
Behind-the-scenes I have an exposed property named "primarySlideshowImages" containing an array of urls:
ngOnInit() {
this.primarySlideshowImages = this.photoService.getImageLists(ImageListKeys.BrochureProductsPrimary);
}
The HTML markup looks like this:
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div *ngFor="let image of primarySlideshowImages; let i = index" class="carousel-item {{ (i == 0) ? 'active' : ''}}">
<img class="d-block img-fluid w-100" [src]="image" >
</div>
</div>
<a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
FYI, I have tested this by hardcoding rather than dynamically adding the images, and everything renders just fine. I think it's a timing thing, but given my relative unfamiliarity with this technology I just don't know how to even search for a solution at this point.
Thank you in advance for your assistance. I do recognize that there are other components and approaches I could use - the ng-bootstrap components, open-source components, purchasable ones, etc. I'd like to try to figure this out using the bootstrap components because I'm pretty new at this technology and hate to jump to an easy solution if there is something I just don't understand that I should be doing. Thanks again for any help you may offer.
It may be that the div containing the image has a width and/or height of the div containing the image is/are 0.
Try setting a style on them. e.g .carousel-item {width:200px; height:200px;}
Also, try checking if the images are being retrieved by the browser using the Network tab on the dev tools.

jsx-a11y/no-static-element-interactions: how to make span clickable

In my project we have this lines of codes:
<span
onClick={this.toggleEditing}
>
{this.state.value}
</span>
Needless to say, it produces an error in eslint with message "Visible, non-interactive elements should not have mouse or keyboard event listeners jsx-a11y/no-static-element-interactions". But I don't know what is the best way to fix this situation, should we change it to button and change style to look like a span. I really don't have much experience with this problem.
Look at the documentation it beautifully tells you what to do.
https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md#how-do-i-resolve-this-error
For your case, the resolution is to add role="button"
<span onClick={this.toggleEditing} role="button">
{this.state.value}
</span>
I fixed it using this:
<span
role="button"
tabIndex={0}
title="Some title"
onClick={this.toggleEditing}
onKeyPress={this.toggleEditing}
>
{this.state.value}
</span>
What is the error? onClick translates to an event in the DOM which is valid (click on a span) so you should be able to make this work.

css selector nth-of-type not work

I want to know how to choose the www.test.com?p=2 with css selector
I use next_page = sel.css(u"div.page_sp > a.pagecl:nth-of-type(2)::attr(href)")
www.test.com?p=2
But it didn't work
Please guide me
Here is the structure looks like:
<div class="page_sp">
<a class="pagecl" href="">prevpage</a>
<a class="page" href="">1</a>
<a class="page" href="">2</a>
....
<a class="page" href="">9</a>
<a class="page" href="">10</a>
<a class="pagecl" href="www.test.com?p=2">nextpage</a>
<span class="page_sp">1/20 </span>
</div>
nth-of-type would not work with a class name, see css3 nth of type restricted to class.
Instead, you may search for a with nextpage text:
>>> response.css("div.page_sp > a:contains('nextpage')::attr(href)").extract()
[u'www.test.com?p=2']
Very poor code!!!
Are you just trying to fetch the next page link?
Use this:
$("a:last-of-type").attr("href");
Although, I must say, there are better ways to do this and you should use other selectors. But well, you didn't give us any contexts so here it is!!!

jsoup : get last index after select

My problem is that I have multiple span tags within a p tag.
I want only the HTML code within the innermost span tag.
Ex:
<span>
<span>
<span>
<span> <strong> lkfghsij</strong> hi how are u?
</span>
</span>
</span>
</span>
Here I want only the strong tag and the text after it to be written into a file.
How do I go about this? Regards.
solved...it was pretty simple...just add:
select().last().html();

Resources