Say I have this:
...
<li class='tab'>7</li>
<li class="tab">8</li>
...
...and I'd like to use Sparkup in my editor to add another say 6 tabs...so I run the sparkup command:
li.tab > a[href=#tab2-$]{$}*6
but it comes out all wrong,
<li class="tab">8</li>
<li class="tab">
1
2
3
...
</li>
My first thought was that my syntax should have been:
(li.tab > a[href=#tab2-$]{$})*6
But that did pretty much the same thing...except this time it didn't insert the second number:
<li class="tab">8</li>
<li class="tab">
$
$
$
...
</li>
Now the range problem (starting at 9 instead of 1) is just a minor annoyance, but what if I want it to repeat the li as well as the a tag?
And yes, before you go off about it, I am indeed aware that I could create all of this stuff just using a simple for loop; but that wasn't part of the question now was it?
You are almost there:
li.tab*6 > a[href=#tab2-$]{$}
You want to create 6 <li> so that's where you should put your multiplier.
No need to be defensive.
Related
Using sublime text 3 cutting and then paste and indent using Ctrl+Shift+V it doesn't do what I think it should do:
<div>
<div></div>
</div>
function(){
test;
}
The expected result should be:
<div>
<div></div>
</div>
function(){
test;
}
Am I missing something?
This is not how Paste and Indent works. It is intended for situations when you copy a line or lines with one indentation and paste it into a block with a different indentation. For example:
<ul class="list1">
<li>One</li>
<li>
<ul class="innerList">
<li>OneA</li>
<li>OneB</li>
| <li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Four</li>
</ul>
Now, I want to copy the line where the cursor is (containing <li>Three</li>) from innerList to list1. If I just do copy and paste (CtrlV), the indentation is wrong:
<ul class="list1">
<li>One</li>
<li>
<ul class="innerList">
<li>OneA</li>
<li>OneB</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
| <li>Three</li>
<li>Four</li>
</ul>
However, if I do "paste and indent" (CtrlShiftV):
<ul class="list1">
<li>One</li>
<li>
<ul class="innerList">
<li>OneA</li>
<li>OneB</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
| <li>Three</li>
<li>Four</li>
</ul>
The indentation is corrected for the current context. To do what you want to do, you'd need to use one of the many HTML and/or JS formatting plugins available on Package Control. I personally use HTML-CSS-JS Prettify, which runs on top of Node.js, but there are plenty to choose from.
as i remember there is Beautiful Html extension well be useful for your issue
I just got into Scrapy & I’m aware this is a Noob question but How do I add an attribute to specify specific pagination link?
here is the html with the element I’m targeting.
`<div class="pagination">
<a rel="prev" href="/collections/all?page=1" class="fa fa-chevron-left prev pagination-icon"></a>
<ul>
<li class="pagination-icon">
1
</li>
<li class="pagination-icon pagination-icon--current">
2
</li>
<li class="pagination-icon">
3
</li>
<li class="pagination-icon">
4
</li>
<li class="pagination-icon pagination-icon--current">
…
</li>
<li class="pagination-icon">
50
</li>
</ul>
I Need to follow the link in this line
<a rel="next" href="/collections/all?page=3" class="fa fa-chevron-right next pagination-icon"></a>
Here is my scrapy code
next_page = response.css('div.pagination a::attr(href)').extract_first()
if next_page is not None:
yield response.follow(next_page, callback=self.parse)
What’s happening is its following this link instead of the other one because it is the first one in the class “pagination”
<a rel="prev" href="/collections/all?page=1" class="fa fa-chevron-left prev pagination-icon"></a>
I can see 2 differences between the attributes of the 2 links, both in the class “pagination”
Rel attribute is different, I need the one with “next”
Class attribute is different, I need “fa fa-chevron-right next pagination-icon”
I’m pretty sure I can get the correct link by specifying one of the 2 attributes listed above in my css selector. I tried using the following CSS selectors but none worked.
div.pagination a.fa fa-chevron-right next pagination-icon a::attr(href) does not work
a.fa fa-chevron-right next pagination-icon a::attr(href) does not work
a.fa fa-chevron-right next pagination-icon::attr(href) does not work
How can I achieve my goal? Why do none of the CSS selectors I tried work?
You can't select multiple classes with a single dot. Either combine each of them with dots or go for this syntax "[class='fa fa-chevron-right next pagination-icon']". However, if any class out of them is generated dynamically then the selector will break.
Then try with this to see what happens.
response.css('div.pagination a[rel="next"]::attr(href)').extract_first()
I am using ExpressionEngine 2.10.3 and also Taxonomy 3 plugin. I have the following code which, when run, returns the 15 nodes I have set up:
<div class="col-md-4">
{exp:taxonomy:nav tree_id="1" display_root="no" root_node_id="2"}
<li>
{node_title}
</li>
{/exp:taxonomy:nav}
</div>
What I would like to do is after every 5 entries, end the current <div> and start a new col-md-4. Usually, I would use {switch} and I have tried it like this:
<div class="col-md-4">
{exp:taxonomy:nav tree_id="1" display_root="no" root_node_id="2"}
<li>
{node_title}
</li>
{switch='||||</div><div class="col-md-4">'}
{/exp:taxonomy:nav}
</div>
But it doesn't work at all, instead it just prints out {switch='||||'}
Is there any way of doing what I'm trying to do?
If you're on 2.7.1 or greater and your taxonomy:nav has the nav_count variable, use the modulo operator. Instead of your {switch...} thing, put
{if nav_count % 5 == 1}
</div><div class="col-md-4">
{/if}
If you end on an modulo-5 count, though, you're going to have an empty div....
So I've stupidly designed a list of recent articles, all is good with the world BUT the first 2 entries html are markedly different then the remainder of entries.
I am yet to turn a line of code so any advice anyone an offer is greatly appreciated.
Simplistically the ul would look like:
<li class="1of2"> /* It's number 1 – give it a class to identify it as special */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
<li class="1of2"> /* It's number 2 – give it a class to identify it as special */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
<li> /* It's not number 1 or 2 – ie. every other item, NO class per se */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
If you imagine a 3 column grid for all entries but the first 2 entries are 1.5 columns each. Bit of a noodle scratch going on here, any thoughts gratefully voted upon.
PS. I will be using Stash if that helps !
Just output the class name based on the value of {count}. I've output the whole opening <li> tag here to keep it simple but you could just output the class attribute or class name itself.
{if count<=2}
<li class="special">
{if:else}
<li>
{/if}
<h1>{title}</h1>
... etc.
</li>
Incidentally, I don't think you can have class names that begin with a number.
Here's how I would do it if you want each of the first 2 to have a unique class name:
<li{if count<=2}class="top{count}"{/if}>
that will output
<li class="top1">...
<li class="top2">...
<li>...
If you want the first 2 items to have the same class:
<li{if count<=2}class="whateveryouwant"{/if}>
which will output
<li class="whateveryouwant">...
<li class="whateveryouwant">...
<li>...
Couldn't you do {if count == "1|2"}class="whatever"{/if} ?
Seems you are asking for two unique classes, one for the first entry and one for the second entry. In that case, this will work:
{if count == 1}
<li class="first">
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
{if:else if count == "2"}
<li class="second">
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
{if:else}
<li>
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
{/if}
Also, class names that start with a number will not validate.
You could do it with simple conditionals as well if there is no "other" class that would then require the if:else part of the conditional:
<li{if count == "1"} class="first"{/if}{if count == "2"} class="second"{/if}">
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
This assumes you don't have any other differences, such as different custom fields in one option versus the other, which MediaGirl's suggestion would handle more elegantly. If the only difference between them is class assignment, this is another alternative.
I'm try to implement test automation with watir-webdriver. By the way I am a freshman with watir-webdriver, ruby and co.
All our HTML-entities have a unique HTML-property named "wicketpath". It is possible to access the element with "name", "id" a.s.o, but not with the property "wicketpath". So I tried it with XPATH but I have no success.
Can anybody help me with a codesnippet how I can access the element via the propertie "wicketpath"?
Thanks in advance.
R.
You should be able to use xpath.
For example, consider the following HTML
<ul class="ui-autocomplete" role="listbox">
<li class="ui-menu-item" role="menuitem" wicketpath="false">Value 1</li>
<li class="ui-menu-item" role="menuitem" wicketpath="false">Value 2</li>
<li class="ui-menu-item" role="menuitem" wicketpath="true">Value 3</li>
</ul>
The following xpath will give the text of the li that has wicketpath = true:
puts browser.li(:xpath, "//li[#wicketpath='true']").text
#=>Value 3
Update - Alternative solution - Adding To Locators:
If you use a lot of wicketpath, you could add it to the locators.
After you require watir-webdriver, add this:
# This allows using :wicketpath in locators
Watir::HTMLElement.attributes << :wicketpath
# This allows accessing the wicketpath attribute
class Watir::Element
attribute(String, :wicketpath, 'wicketpath')
end
This will let you use 'wicketpath' as a locator:
p browser.li(:wicketpath, 'true').text
#=> "Value 3"
p browser.li(:text, 'Value 3').wicketpath
#=> true
Try this
puts browser.li(:css, ".ui-autocomplete > .ui-menu-item[wicketpath='true']").text
Please Let me know is the above scripting is working or not.