<ul>
<li class="selected cell">test</li>
<li class="cell">test2</li>
</ul>
How can I select only the .selected .cell element?
Y.one('.selected, .cell') <= This selects boths li elements. and I just want to select the first element.
Is there something like?
Y.one('.cell').one('.selected') ???
.selected.cell
Notice the lack of space between them.
Related
I have a dropdown menu with 7 values and these 7 values are stored in the form of list items under unordered list as:
<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li class="rcbItem ">--Select--</li>
<li class="rcbHovered ">PIPL-C1-BH-RILJM</li>
<li class="rcbItem ">PIPL-C1-BH1-RILJM</li>
<li class="rcbItem ">PIPL-C1-BH2-RILJM</li>
<li class="rcbItem ">PIPL-C1-BH-RPLJM</li>
<li class="rcbItem ">PIPL-C1-DHJ-RPLJM</li>
<li class="rcbItem ">PIPL-C1-DHJ-RILJM</li>
</ul>
I want to click on each value of this dropdown menu using for loop with the help of selenium chromedriver in python.
Suppose I want to click on 2nd value PIPL-C1-BH-RILJM, I can do it as :
driver.find_element(By.XPATH,"//div[#id='ContentPlaceHolder1_rcmbCapacityTranch_DropDown']/div/ul/li[2]").click()
But to use it in the for loop, I have to do indexing on li tag. So, when I write as:
i=2
driver.find_element(By.XPATH,"//div[#id='ContentPlaceHolder1_rcmbCapacityTranch_DropDown']/div/ul/li['+str(i)+']").click()
It shows only --Select-- and does not select the 2nd value and same happens with other values of i.
I have also tried as:
i=2
driver.find_element(By.XPATH,"//div[#id='ContentPlaceHolder1_rcmbCapacityTranch_DropDown']/div/ul/li['"+str(i)+"']").click()
But --Select-- is selected again from the dropdown menu.
So, can anyone please help me to click on a particular value with indexing on li tag.
Any help would be appreciated.
Try like below once:
Collect all the li tag elements in a list and then iterate over them. Use find_elements for the same.
# This should highlight all the li tags - //div[#id='ContentPlaceHolder1_rcmbCapacityTranch_DropDown']/div/ul/li
options = driver.find_elements(By.XPATH,"//div[#id='ContentPlaceHolder1_rcmbCapacityTranch_DropDown']/div/ul/li")
# This should print 7
print(len(options))
# Start the loop from index 1 since the first option is "--Select--"
for i in range(1,len(options)):
options[i].click()
I have the following list;
* unordered item 1
* unordered item 2
* unordered item 3
How would I use wrap with abbreviation (ctrl+shift+G) or (ctrl+shift+A) and remove the
* unordered and be left with just the item and number. I am using Sublime Text 3 on Linux
and I select the text above then ctrl+shift+G Then I want to create an unordered list nav bar.
So in the wrap with abbreviation window I type nav>ul.nav>li.nav-items$*>a|t and the result of
this is;
<nav>
<ul class="nav">
<li class="nav-item1">unordered item 1</li>
<li class="nav-item2">unordered item 2</li>
<li class="nav-item3">unordered item 3</li>
</ul>
</nav>
I removed the * but not the unordered. I know the |t is the Emmet trim filter. Is there a
way to pass this filter a number value to tell it how many items or words to trim?
What I want to be left with after applying |t (the trim filter) is;
<nav>
<ul class="nav">
<li class="nav-item1">item 1</li>
<li class="nav-item2">item 2</li>
<li class="nav-item3">item 3</li>
</ul>
</nav>
Emmet removes only well-known list markers like numbers or bullets. It’s much better and easier to remove something else using native editor features like column selection
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 came upon strange situation. I have a List and each list item consists of span and image element. They are both inline and as long as span is empty they are next to each other, but when span has text, image acts as if it was display:block and falls underneath the span element which is not my desired effect. (I fill span with text dynamically)
<ul id="playerListInsideRoom">
<li class="playerCircleInsideRoom circleFull" seatnumber="1">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span> </span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="2">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="3">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="4">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
</ul>
.playerCircleInsideRoom span{
position:relative;
left:50px;
}
#playerListInsideRoom img {
height:15px;
width:15px;
display:inline-block;
position:relative;
right:40px;
}
Even when I get rid of relative positions the problem is still occuring.
If the width of inline elements is larger than the allowed width of the container (your li element) then the line will break.
You could use whitespace: nowrap on the li to prevent it (though that could possibly break the rest of your layout).
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.