changing the class name in nested divs - jquery-ui

I have a nested divs as follows, how can I change the class of span in the div whose id is inside-one?
thanks.
my code is as follows:
$("#top span.myclass").removeClass("myclass").addClass("myclass-new");
<div id="top">
<div id="inside-one">
<span id="s1" class="myclass"></span>
</div>
<div id="inside-two">
<span id="s2" class="myclass"></span>
</div>

$('#inside-one').find('span').removeClass('myClass').addClass('myClass-new');

To access from #top without using span ID
$('#top #inside-one span.myclass').toggleClass('myclass-new');
To access from #inside-one without using span ID
$('#inside-one span.myclass').toggleClass('myclass-new');
or simply use the span ID
$('#s1').toggleClass('myclass-new');
Edit: In case if you have many span inside #inside-one and want to access just the first span with .myclass (DEMO)
$('#top #inside-one span.myclass:first-child').toggleClass('myclass-new');
DEMO

Related

create relative links with Thymeleaf

I have the following code which loops through a list of countries and creates a href links
<div class="container" th:each="country: ${countryList}">
<a th:href="${country.countryAbbr}"><div clss="row" th:text="${country.country}"></div></a>
</div>
The current page url is "localhost:8080/directory", and the generated url is showing as
"localhost:8080/us"
How can I make the url show as "localhost:8080/directory/us"
I want "us" to be added to the current url of the page.
Try create the following code in your Controller class.
#RequestMapping(value="/", method=RequestMethod.GET)
public String rootGet() {
return "redirect:/directory";
}
You can use ServletUriComponentsBuilder:
<div th:with="urlBuilder=${T(org.springframework.web.servlet.support.ServletUriComponentsBuilder)}"
class="container" th:each="country: ${countryList}">
<a th:href="${urlBuilder.fromCurrentRequest().path(${country.countryAbbr}).toUriString()}">
<div clss="row" th:text="${country.country}"></div>
</a>
</div>
Give a try to this one
<div class="container" th:each="country: ${countryList}">
<a th:href="#{${country.countryAbbr}}"><div clss="row" th:text="${country.country}"></div></a>
</div>
Using # usually resolves the default context but I am not aware of your environment.
For example, if you had Tomcat .war file, and your application would be hosted at localhost:8080/myApp, you would want result /myApp/us rather then /us. # would do that trick.
If above is not relevant for you, use this one:
<div class="container" th:each="country: ${countryList}">
<a th:href="#{'/directory/' + ${country.countryAbbr}}"><div clss="row" th:text="${country.country}"></div></a>
</div>

How to access with a link, any item in dom-repeat

I have dom-repeat element and listing some items, (height:350px cartoons). I can give unique id while rendering the items. Everything is working perfectly. I wonder, How to access with a link, any item in dom-repeat, that I know the id. something like jobijoy.com/dashboard#-KwxUEjy2vl_XPkOXo3j to able to access directly to the item.
EDIT : jobijoy.com/dashboard#-KwxUEjy2vl_XPkOXo3j does not work.
<template id="document" is="dom-repeat" items="{{qdashboard}}" sort='showLastItemOnTop' rendered-item-count="{{renItemCount}}">
<div class="liste" id="{{item.key}}"> // id="-KwxUEjy2vl_XPkOXo3j"
...
</div>
</template>
Not: jobijoy.com is live and can check there how its look like)
You can wrap the div you are using with an anchor and set the href to the required url.
If the id of the item you want is in the 'key' property you can use:
<template id="document" is="dom-repeat" items="{{qdashboard}}" sort='showLastItemOnTop' rendered-item-count="{{renItemCount}}">
<a href="jobijoy.com/dashboard#{{item.key}}">
<div class="liste" id="{{item.key}}"> // id="-KwxUEjy2vl_XPkOXo3j"
...
</div>
</a>
</template>

capybara: within scope does not restrict actions to inside of that element

There are multiple similar kind classes and buttons but I was trying to click on a button which is inside a particular class by using code
within(first(locator, text: text))do
scroll_to(first('button'))
first('button').click
end
from
<div class="some parent class">
<div class="some other class" id="1">
<div class="class1">......</div>
<div class="class2">......</div>
<div class="class of button">......</div>
</div>
<div class="class used inside within" id="2">
<div class="class1">......</div>
<div class="class2">......</div>
<div class="class of button">......</div>
</div>
</div>
But when I run my above code then it clicks similar kind of button which is inside the class some other class and not used inside within. Any suggestion what should I do to make it work.
Also to check I have run first(locator, text: text) and path of found element is for the path of class <div class="class used inside within" id="1">
Ok I get it working. Infact i was using page.execute_script("$('button').click()") to click on the button in my code which seems to be not restricted to particular class by using within. But now i clicked with pure capybara code without script and it clicks on correct button now

Can I use gr:category in GoodRelations and rdf:type from productontology together?

Can I use gr:category and rdf:type from product ontology together?
I see vso:Canoe from automobile ontology...
<div typeof="gr:SomeItems vso:Canoe" about="#product">
<span property="g:name">ACME Foldable Canoe</span>
<div property="gr:category" content="Outdoors/Boats/Canoes"></div>
</div>
However I'm using productontology,is this possible?
<div about="#myObject" typeof="http://www.productontology.org/id/Canoe">
<div rel="rdf:type" resource="http://purl.org/goodrelations/v1#SomeItems"></div>
<div property="gr:description" xml:lang="en">... a longer description ...</div>
<div property="gr:name" xml:lang="en">.. a short name for the object ...</div>
<div property="gr:category" content="Outdoors/Boats/Canoes"></div>
</div>
Yes, that is well possible and increases a client's ability to understand your data.
So
<div about="#myObject" typeof="http://www.productontology.org/id/Canoe">
<div rel="rdf:type" resource="http://purl.org/goodrelations/v1#SomeItems"></div>
<div property="gr:description" xml:lang="en">... a longer description ...</div>
<div property="gr:name" xml:lang="en">.. a short name for the object ...</div>
<div property="gr:category" content="Outdoors/Boats/Canoes"></div>
</div>
is perfectly valid.
There is currently no official statement from major search engines on the ways they honor additional type information, but it is a safe assumption that
it does not harm adn
the more data of this form is out there, the more it will matter for search engines.
Yes, you can use types and properties from any namespace in RDFa (and RDF in general). In the case of your snippet, you could even get rid of the rdf:type line since #typeof accepts multiple types from any number of namespaces, and those types can be in the form of CURIEs or full URIs (same applies to #property). So your snippet would become:
<div about="#myObject" typeof="http://www.productontology.org/id/Canoe gr:SomeItems">
<div property="gr:description" xml:lang="en">... a longer description ...</div>
<div property="gr:name" xml:lang="en">.. a short name for the object ...</div>
<div property="gr:category" content="Outdoors/Boats/Canoes"></div>
</div>

changing class of a span

I have two divs as follows and I want to change the class name of span s1 from div top2. But the following code is not working. How can I do that?
$('#top1 #s1 span.myclass-old').toggleClass('myclass-new');
<div id="top1">
<span id="s1" class="myclass">a</span>
<span id="s2" class="myclass">b</span>
</div>
<div id="top2">
<span id="s1" class="myclass-old">a</span>
<span id="s2" class="myclass">b</span>
</div>
If you wanna change your class from 'class-old' to 'class-new' try this code:
$('#top1 #s1.myclass-old').removeClass('myclass-old').addClass('myclass-new');
Use this $('#top1 #s1').attr('class', 'myclass-new');​​
http://jsfiddle.net/blackpla9ue/tBLFt/
Using toggleClass would only result in adding/removing myclass-new to your span while having the existing myclass.
('#top1 > #s1').toggleClass('myclass-new');
child selector
Your selector $('#top1 #s1 span.myclass-old').toggleClass('myclass-new'); will search for a span with id 's1' and then will search for ts children span with the class "myclass-old". In this case you have multiple same id's so you should use the following selector
$('#top2 span.myclass-old').toggleClass('myclass-new'); or $('#top1 span.myclass-old').toggleClass('myclass-new');
Your selector is wrong,
try
$('#top1 #s1.myclass-old').toggleClass('myclass-new');
I suggest you change the ID of spans, as ID are used to be unique in the document, you might end up with messy code

Resources