I have some code that is structured like this:
<h1><span id="One"></span><span id="Yellow">One</span></h1>
<h2><span id="door"></span><span id="White">door</span></h2>
<p>door</p>
<ul>
<li>Intel CPU</li>
</ul>
<h2><span id="door"></span><span id="White">door</span></h2>
<p>AMD CPU</p>
<ul>
<li>Elbrus CPU</li>
</ul>
<h1><span id="One more"></span><span id="Yellow">One more</span></h1>
<h2><span id="door"></span><span id="White">door</span></h2>
<p>door</p>
<ul>
<li>Intel II CPU</li>
</ul>
<h2><span id="door"></span><span id="White">door</span></h2>
<p>AMD II CPU</p>
<ul>
<li>Elbrus II CPU</li>
</ul>
<h1><span id="Something></span></span><span id="Not Yellow">Something</span></h1>
<h2><span id="door"></span><span id="White">door</span></h2>
<p>door</p>
<ul>
<li>Intel III CPU</li>
</ul>
<h2><span id="door"></span><span id="White">door</span></h2>
<p>AMD III CPU</p>
<ul>
<li>Elbrus III CPU</li>
</ul>
How could I get the strings, that contain "Intel", "AMD", "ELbrus", after h1 with span, that contains ID="One*", but not after h1 with span, that not contains ID="One*" (only in front of him).
EDIT:
How can I get the following strings only:
Intel CPU
AMD CPU
Elbrus CPU
Intel II CPU
AMD II CPU
Elbrus II CPU ?
I've used:
//h1/span[not(contains(.,"One"))]/preceding::p[contains(text(),"AMD")]|//h1/span[not(contains(.,"One"))]/preceding::p[contains(text(),"Intel")]|//h1/span[not(contains(.,"One"))]/preceding::p[contains(text(),"Elbrus")]|//h1/span[not(contains(.,"One"))]/preceding::li[contains(text(),"Intel")]|//h1/span[not(contains(.,"One"))]/preceding::li[contains(text(),"AMD")]|//h1/span[not(contains(.,"One"))]/preceding::li[contains(text(),"Elbrus")]
but it's not working.
Assuming that Elbrus III CPU should really be Elbrus II CPU in your example of selected text, this should work...
//text()[(contains(.,'Intel') or contains(.,'AMD') or contains(.,'Elbrus')) and preceding::h1[1][span[contains(#id,'One')]]]
Related
<ul>
<li repeat.for="row of router.navigation" > ${row.title}
</li>
</ul>
infact i want to style one of the router button that generate with repeat.for method
want to make left border radius for navigation bar like the right of the navigation bar
As a one-liner option, you could bind your class attribute with ...
<li repeat.for="row of router.navigation" class="${myBool ? 'a-class' : 'another-class'}">${row.title}</li>
You can bind class with string interpolation or with .bind syntax. See https://aurelia.io/docs/binding/class-and-style#class
UPDATE: Sorry...should have read your other comment further down. If it's just for the first , why not just use CSS?
#myUl>li:first-child{
// my CSS here
}
You can identify the first repeated element with the $index context variable.
This would lead to something like this:
<ul>
<li repeat.for="row of router.navigation" >
<a if.bind="$index === 0" class="blah"> ${row.title} </a>
<a else class="another class"> ${row.title} </a>
</li>
</ul>
If you need to do the styling on the <li> tag, the solution could be like this:
<ul>
<template repeat.for="row of router.navigation" >
<li if.bind="$index === 0" class="blah"> ${row.title} </li>
<li else class="another class"> ${row.title} </li>
</template>
</ul>
I'm currently trying to build a carousel with bootstrap in the frontend.
Generating the slides works great.
<f:if condition="{gallery.rows}">
<f:for each="{gallery.rows}" as="row">
<f:for each="{row.columns}" as="column">
<f:if condition="{column.media}">
<div class="item">
<f:media
file="{column.media}"
width="{column.dimensions.width}"
height="{column.dimensions.height}"
alt="{column.media.alternative}"
title="{column.media.title}"
/>
<div class="carouselText">
<div class="container">
<h1>{column.media.title}</h1>
<f:if condition="{column.media.description}">
<p>
{column.media.description}
<f:if condition="{column.media.link}">
read more
</f:if>
</p>
</f:if>
</div>
</div>
</div>
</f:if>
</f:for>
</f:for>
</f:if>
Now I need the little dots for the controls.
The problem is, that they need to count up like this:
<li data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
Using the same f:for loop as I did to generate the slides in combination with the iteration attribute doesn't work because it's nested in row and columns.
Following output with <f:for each="{row.columns}" as="column" iteration='i'>:
<li data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="0"></li>
Luckily the gallery array also has an integer in which the amount of images is stored {gallery.count.files} = 3.
There must be an easy way to use for-loops or similar to count up with just an integer and not having an array, right?
In TYPO3v8 and above:
{f:variable(name: 'count', value: 0)}
<!-- perform iteration to any depth, recursive or reverse or whatever -->
<li data-slide-to="{count}">..</li>
{f:variable(name: 'count', value: '{count + 1}')}
In TYPO3v7 and earlier you will need the VHS library and substitute f:variable for v:variable.set and {count + 1} for {count -> v:math.sum(b: 1)}.
I have this html content:
<p>This is a paragraph:</p>
<ul>
<li>
<p>point 1</p>
</li>
<li>
<p>point 2</p>
<ul>
<li>
<p>point 3</p>
</li>
<li>
<p>point 4</p>
</li>
</ul>
</li>
<li>
<p>point 5</p>
</li>
</ul>
<ul>
<li>
<p><strong>sub-head : </strong>This is a para followed by heading, This is a para followed by heading, This is a para followed by heading, This is a para followed by heading</p>
</li>
<li>
<p><strong>sub-head 2: </strong></p>
<p>This is a para followed by heading, This is a para followed by heading, This is a para followed by heading, This is a para followed by heading</p>
</li>
</ul>
I want to remove all the <p>&</p> tags between <li>&</li> irrespective of its position between <li>&</li>. similarly i need to remove p tags between td tags inside a table.
This is my controller code so far:
nogo={"<li>\n<p>" =>'<li>', "</p>\n</li>" => '</li>', "<td>\n<p>" => '<td>', "</p>\n</td>" => '</td>',
'<p> </p>' => '','<ul>' => "\n<ul>",'</ul>' => "</ul>\n", '</ol>' => "</ol>\n" ,
'<table>' => "\n<table width='100%' border='0' cellspacing='0' cellpadding='0' class='table table-curved'>",
'<' => '<', '>'=>'>','<br>' => '','<p></p>' => '', ' rel="nofollow"' => ''
c=params[:content]
bundle_out=Sanitize.fragment(c,Sanitize::Config.merge(Sanitize::Config::BASIC,
:elements=> Sanitize::Config::BASIC[:elements]+['table', 'tbody', 'tr', 'td', 'h1', 'h2', 'h3'],
:attributes=>{'a' => ['href']}) )#.split(" ").join(" ")
re = Regexp.new(nogo.keys.map { |x| Regexp.escape(x) }.join('|'))
#bundle_out=bundle_out.gsub(re, nogo)
im passing the above html content to this code through params[:content] which ive assigned to a variable c.
Following is the o/p which is not as expected. Some close p tags and open p tags are still between li and close li tags
<p>This is a paragraph:</p>
<ul>
<li>point 1</li>
<li>point 2</p>
<ul>
<li>point 3</li>
<li>point 4</li>
</ul>
</li>
<li>point 5</li>
</ul>
<ul>
<li><strong>sub-head : </strong>This is a para followed by heading, This is a para followed by heading, This is a para followed by heading, This is a para followed by heading</li>
<li><strong>sub-head 2: </strong></p>
<p>This is a para followed by heading, This is a para followed by heading, This is a para followed by heading, This is a para followed by heading</li>
</ul>
My aim is simple i just want to remove all the p tags inside li and td tags, which im not able to do correctly. Any help is appreciated.
I would like to use regex to do this. and i know using regex is not the correct way to parse html content.
I won't recommend using regex because they're a dead-end unless the HTML is trivial and you create it. And, if you are the one creating it, then modifying it after generating it is the wrong way to go about generating content.
Use a parser. Nokogiri is the de-facto standard for Ruby, and, with some knowledge of CSS or XPath, you can quickly learn to search, or modify, HTML and XML:
require 'nokogiri'
doc = Nokogiri::HTML(<<EOT)
<html>
<body>
<ul>
<li>
<p>foo</p>
</li>
<li>
<span>
<p>bar</p>
</span>
</li>
</ul>
</body>
</html>
EOT
doc.search('li p').each do |p_tag|
p_tag.remove
end
puts doc.to_html
Running that results in:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<body>
<ul>
<li>
</li>
<li>
<span>
</span>
</li>
</ul>
</body>
</html>
The tutorials on the Nokogiri site are your starting point. Stack Overflow is also a good resource as there are many different easily-searchable questions about all aspects of using the gem.
I just found a lot of posts but none of them show a clear answer that works: how can I display 3 items in a row when user is desktop and stack them vertically when in mobile?
I see this is possible with no hacking for product grid (but products are shown two by row), probably I can use the something similar for the same result.
I have created this sample which is able to show 3 items when desktop and show 2 in a row and 1 in another. That's close to what I want:
<ul class="products-grid products-grid--max-4-col first last odd">
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 167px;">
<h2>Assine</h2>
</div>
</li>
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 167px;">
<h2>Vote</h2>
</div>
</li>
<li><img alt="" src="http://192.241.128.153/media/wysiwyg/index/pencil.jpg" />
<div class="product-info" style="min-height: 148px;">
<h2>Receba</h2>
</div>
</li>
</ul>
Thanks!
You can achieve this using a media query in your CSS such as..
#media only screen and (max-width: 770px) {
.products-grid li {
width: 100%;
}
}
Don't forget the product list version too.
i'm using nokogiri gem, i want to extract the last number for a pagination (4) with :nth-last-of-type(3) or nth-last-child(3) but show 0 in my ruby test.
<ul class="pag">
<li class="pag-first">first</li>
<li class="pag-item"><a href"#">2</a></li>
<li class="pag-item"><a href"#">3</a></li>
<li class="pag-item"><a href"#">4</a></li>
<li class="pag-next"><a href"#">next</a></li>
<li class="pag-last"><a href"#">last</a></li>
</ul>
My question is, if exist another alternative to get the last number (4) with another css3 property in nokogiri gem.
My css example is running here: http://jsfiddle.net/kfDgR/
I hope, you can guide me, thk.
You need to be careful with last-child and last-of-type, they don't always mean what you think they do and the specs are ambiguous. I recommend:
doc.search('li.pag-item').last
Using XPATH is good to go:
require 'nokogiri'
doc = Nokogiri::HTML::Document.parse <<-_HTML_
<ul class="pag">
<li class="pag-first">first</li>
<li class="pag-item"><a href"#">2</a></li>
<li class="pag-item"><a href"#">3</a></li>
<li class="pag-item"><a href"#">4</a></li>
<li class="pag-next"><a href"#">next</a></li>
<li class="pag-last"><a href"#">last</a></li>
</ul>
_HTML_
doc.at("//ul[#class = 'pag']/li[4]").text
# => "4"
doc.at("//li[#class='pag-item'][last()]").text
# => "4"