I have <ul>, and i want to retrieve all of the dates inside a href.
It looks like this
<ul class="customSelectBoxList" id="BookingMenuCurrentMovieDay">
<li class="current">What dat</li>
<li class="">Today, mon</li>
<li class="">Tomorrow, tue</li>
<li class="">Wed 23/12</li>
<li>Thu 31/12</li>
<li>Other day</li>
</ul>
And i want to fetch all matches for example Wed 23/12 would be 20151223.
And for this whole example it would be 20151221, 20151222, 20151223 and 20151231.
EDIT1
This would be a query to fetch wed 23/12 for example
/html/body/div[#id='ShowListContainer']/div[#class='customSelectBoxContainer theme-csb']/
div[#class='customSelectBoxdisplayNone']
/div[#class='customSelectBoxListContainer']/ul[#id='BookingMenuCurrentMovieDay']/li[4]/a
EDIT2
This query (with substring-after) gives null results:
/html/body/div[#id='ShowListContainer']/div[#class='customSelectBoxContainer theme-cab']
/div[#class='customSelectBox displayNone']
/div[substring-after(//ul[#id="BookingMenuCurrentMovieDay"]/li/a/#data-showlistfilterdate, "|")]
Maybe i have misplaced substring-after()?
Perfect use-case for substring-after():
substring-after(//ul[#id="BookingMenuCurrentMovieDay"]/li/a/#data-showlistfilterdate, "|")
Related
JS fiddle: http://jsfiddle.net/ernestsoo22/qqgj9jf5/1/
I have a ng-repeat in my code like this:
<ul>
<li ng-repeat=" opt in courses">
{{$index}}
</li>
</ul>
With this, I am able to get the output of:
0 , 1 , 2 , 3
Problem: Using a filter like such does not get the $index that I want:
<ul>
<li ng-repeat=" opt in courses | filter:{code:'INF'}" >
{{$index}}
</li>
</ul>
With this filter I get the $index of (refer fiddle):
0 , 1
Instead of this, what I am looking for is to get the actual index of the courses json object. So according to the filter, the output would be:
2 , 3
How can I achieve this while using a filter?
Use ng-if="opt.code.indexOf('INF')>=0" in li to check the filter to check the INF present
function TodoCtrl($scope) {
$scope.courses = [
{"code":"ICT10001","description":"Problem Solving with ICT","credits":"12.5","type":"Core"},
{"code":"COS10005","description":"Web Development","credits":"12.5","type":"Core"},
{"code":"INF10003","description":"Introduction to Business Information Systems","credits":"12.5","type":"Core"},
{"code":"INF10002","description":"Database Analysis and Design","credits":"12.5","type":"Core"}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat=" opt in courses" ng-if="opt.code.indexOf('INF')>=0" >
{{$index}}
</li>
</ul>
</div>
</div>
<li ng-repeat=" opt in courses">
<span ng-if="opt.code==='INF'">{{$index}}</span>
</li>
Does that fix it?
for some reasons i have somthing like this in my html code
id = 1
<li class="anyclass" ></li>
<li class="firstclasname + id" ></li>
<li class="scondclasname + id" ></li>
<li class="thirdclasname + id ></li>
<li class="forthclasname + id" ></li>
<li class="fifthclasname + id" ></li>
</ul>
id = 2
<li class="anyclass" ></li>
<li class="firstclasname + id" ></li>
<li class="scondclasname + id" ></li>
<li class="thirdclasname + id ></li>
<li class="forthclasname + id" ></li>
<li class="fifthclasname + id" ></li>
</ul>
can i make just one css file for this code contain something like this :
.every first calss name + what ever id {
background-image: url('/image/facebook.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -277px -446px;
}
You just need to try nth-child of CSS3 property.
ul.yourClass li.firstclasname:nth-child(2){
background:url('/image/facebook.png') -277px -446px no-repeat;
background-size:auto;
}
You can use starts with [attr^=value] attribute selector.
li[class^="firstclasname"] {
background: blue;
}
<ul>
<li class="anyclass"></li>
<li class="firstclasname1"></li>
<li class="scondclasname1"></li>
<li class="thirdclasname1"></li>
<li class="forthclasname1"></li>
<li class="fifthclasname1"></li>
</ul>
<ul>
<li class="anyclass"></li>
<li class="firstclasname2"></li>
<li class="scondclasname2"></li>
<li class="thirdclasname2"></li>
<li class="forthclasname2"></li>
<li class="fifthclasname2"></li>
</ul>
For cases like this I like to use two selectors -- a common one, relevant to all the items, and a specific one to identify a single item.
An example use would be something like this:
<ul class="contact-list">
<li class="item item-1">Contact 1</li>
<li class="item item-2">Contact 2</li>
<li class="item item-3">Contact 3</li>
</ul>
In CSS you can then target the list itself, all the items or one specific item.
Edit
Apologies, I skimmed your question and missed the part about id=1 and id=2. There are a few different options depending on how many IDs there will be and whether or not this will be known.
For a short list of known ID's you could just target the individual items as I mentioned. If there are an unknown number of IDs (or the IDs themselves are unknown) you may consider using the nth-child selector.
This depends entirely on the effect you're trying to achieve, which isn't detailed in your question, but some commonly used (in the context of my example markup above) are as follows:
.contact-list:nth-child(odd) applies to every odd element, i.e. 1st, 3rd, 5th
.contact-list:nth-child(even) applies to every even element, i.e. 2nd, 4th, 6th
.contact-list:nth-child(1) applies only to the first element
.contact-list:nth-child(4n+4) applies to every fourth element
And so on. Most common requirements have been done a thousand times before and can be found with a quick google search along the lines of "CSS every second element".
I would like to append dates to the end of several strings of text with screens smaller that 500px.
My HTML is:
<div class="left-section" id="activities">
<ul>
<li data-string="September 2012 - May 2014">National Student Advertising Competition</li>
<li data-string="January 2012 - May 2014">Advertising Club</li>
<li data-string="November 2012 - May 2013">Interactive Marketing Association | Student Board Member</li>
<li data-string="September 2011 - May 2014">University Intramural Co-Ed Volleyball and Soccer</li>
</ul>
</div>
And my CSS in the media query is:
#activities:after {
content: " - " attr(data-string);
}
All that displays are the strings and then after the list is the " - "
You need a space and * before the :after to get everything inside #activities like this:
#activities *:after {
content: " - " attr(data-string);
}
<div class="left-section" id="activities">
<ul>
<li data-string="September 2012 - May 2014">National Student Advertising Competition</li>
<li data-string="January 2012 - May 2014">Advertising Club</li>
<li data-string="November 2012 - May 2013">Interactive Marketing Association | Student Board Member</li>
<li data-string="September 2011 - May 2014">University Intramural Co-Ed Volleyball and Soccer</li>
</ul>
</div>
Hope it helped!
I am trying to click a link but it is different from others links I have made it. I don't have a field called "id" or something.
Here is the HTML. I need it to click "pibmunic super" button/link. The FIREPATH XPath shows .//*[#id='informacoes_estatisticas']/ul/li[20]/span
<div id="informacoes_estatisticas">
<h3 class="titulo">Informações Estatísticas</h3>
<ul class="links">
<li class="item Censo Agropecuário_2006">
<li class="censo2010 super">
<li class="educa super">
<li class="empresas super">
<li class="vida super">
<li class="item Estimativa da População 2014_">
<li class="prodext2013 super">
<li class="financas super">
<li class="frota super">
<li class="item Fundações Privadas e Associações sem Fins Lucrativos no Brasil 2010_">
<li class="item Índice de Desenvolvimento Humano Municipal - IDHM_">
<li class="instfin super">
<li class="item Mapa de Pobreza e Desigualdade - Municípios Brasileiros_2003">
<li class="morbid super">
<li class="prodpec2013 super">
<li class="item Pesquisa Nacional de Saneamento Básico_2008">
<li class="item Produção Agrícola Municipal - Cereais, Leguminosas e Oleaginosas_2007">
<li class="lavperm2013 super">
<li class="lavtemp2013 super">
<li class="pibmunic super">
<span class="super">Produto Interno Bruto dos Municípios</span>
<ul class="pibmunic sub">
</li>
<li class="partpol super">
<li class="assismed super">
<li class="snig_censo2010 super">
</ul>
</div>
I am trying to write my code as something like this
Set m = html.getElementById("something")
Set a = m.getElementsByTagName("something")(something)
a.Click
I am not sure this is right, I have tried lots of combinations and it does not work. I don't know exactly which "getelementsby" I should use or what to give the command inside ().
Hope you can help me !! thanks
All of your classes seem to be unique. If that's the case you should change all the class attributes to id attributes ex:
class="something"
to
id="something"
Once you do that getElementById("something") will work. getElementsByTagName() returns an array of elements with a specific tag. ex:
getElementsByTagName("li")
retrieves all the li elements under a node.
If the newest VBA supports querySelectorAll() that will allow you to use CSS selectors to find elements. ex:
querySelectorAll(".something")
This will find all elements with the class something. However, since there can be multiple elements with the same class, you will get an array as a result. You can either loop over these elements to process them, narrow your selector, or get the first index of the returned array.
If VBA still does not support querySeletorAll() and you will need to combine getElementsByTagName() with a loop over the matching tags to find elements with the something class. ex:
For Each el in getElementById("container").getElementsByTagName("li")
For Each cl in el.className.Split(' ')
If cl = "something" Then
el.onclick()
End If
Next
Next
I would recommend assigning Id's or if at all possible use JavaScript or jQuery. They are more specialized at handling at these tasks (more abstraction). jQuery would be as simple as:
$(".something").trigger("click");
the HTML:
<ul id="nav">
<li id="listItem">a list item</li>
<li id="link01">list item with ID</li>
<li id="link02">another link with ID</li>
<li class="lastItem">Contact</li>
<li class="lastItem">the Very Last List Item</li>
</ul>
the JavaScript:
alert($$('.lastItem').getFirst('li').get('text'));
console returns this error:
TypeError: $$(...).getFirst(...).get is not a function
um...whut? what did i miss? if i take out the getFirst(), it works, but returns, of course, both <li> text contents... which i don't want. just want the first...
halp.
WR!
You trying to call getFirst on Elements array($$ return elements array!) the getFirst() method is only on a dom mootools element and it will return his first child
what you are looking for is this:
alert($$('.lastItem')[0].get('text'));