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
Related
There is the structure like:
<div class="parent">
<div>
<div class="fieldRow">...</div>
</div>
<div>
<div class="fieldRow">
<div class="CheckBox">
</div>
</div>
<div>
<div class="fieldRow">...</div>
</div>
<div>
<div class="fieldRow">...</div>
</div>
</div>
In my script I am writing a loop for each of the 4 div's under div[#class='parent'] and aiming to click the checkbox if there is, i.e.
members = page.all(:xpath, '//div[#class='parent'])
members.each do |a|
if **page.has_xpath?(a).find(:xpath, "div[#class='fieldRow']/div[#class='CheckBox']")**
a.find(:xpath, "div[#class='fieldRow']/div[#class='CheckBox']").click
end
end
However I can't look for the correct usage of has_xpath? with xpath including variable.
Please advice? Thank you!
has_xpath? takes an XPath expression (not an element) and returns a boolean (true/false) based on whether there are any elements that match that expression within the current scope - http://www.rubydoc.info/gems/capybara/Capybara/Node/Matchers#has_xpath%3F-instance_method. Since it returns true/false you can't then call find on it. For the example you posted there's no need for XPath or checking for the existence of the elements, just find all the matching elements and call click on them. Something like
page.all('div.parent div.fieldRow div.Checkbox').each { |cb| cb.click }
or
page.all('div.parent div.Checkbox').each { |cb| cb.click }
if the fieldRow class isn't something you really need to check.
Note: this assumes clicking the elements doesn't invalidate any of the other matched elements/change the page.
If you REALLY need to do it with the whole members and looping on them , using XPath, and checking for presence then it would be something like
members = page.all(:xpath, './/div[#class='parent'])
members.each do |a|
if a.has_xpath?(:xpath, ".//div[#class='fieldRow']/div[#class='CheckBox']")
a.find(:xpath, ".//div[#class='fieldRow']/div[#class='CheckBox']").click
end
end
Note: the .// at the beginning of the XPath expressions is needed for scoping to work correctly - see https://github.com/teamcapybara/capybara#beware-the-xpath--trap - which is an issue using CSS selectors doesn't have, so you should really prefer CSS selectors whenever possible.
i am making my first steps in writing cucumber features in Ruby On Rails application and am struggling with getting a value of an element.
The structure is something like this:
<div class="selectize-dropdown-content">
<div data-value="test1" data-selectable="" class="option">TEST 1</div>
<div data-value="test2" data-selectable="" class="option">TEST 2</div>
</div>
I would like to get the value of the div element when the data-value is "test1" ... so, TEST 1
Currently I am doing it this way:
within(:xpath, '//div[#class="selectize-dropdown-content"]') do
find(:xpath, '//div[#data-value="' + value + '"]')
end
But it fails for not finding the "within" div.
So, I guess I am doing it wrong.
How does one go about it?
Thx
You need to call text method on the desired element
within('.selectize-dropdown-content') do
find(:xpath, "//div[#data-value='#{value}']").native.text
end
if there's a parent element for your block of code with ID you can do it like:
text = page.find('#parentID div:nth-child(1) div:first-child', visible: true).text
if you don't try it with javascript
text=page.evaluate_script('document.getElementsByClassName("selectize-dropdown-content")[0].getElementsByTagNam("div")[0].value')
I am trying to update the HTML content inside div using jquery HTML function.
<div id="test"></div>
.
.
.
<div id = "test" style="display:none"></div>'
When I am updating the content.
(#test).html(result)
I need to update both the div .How can I achieve this.
Thanks
ID must be unique, you should use class instead
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
$('div.test')
.html('<p>All new content.You want!</p>');
Id must be unique in HTML, you should use class instead
HTML:
<div class="test"></div>
.
.
.
<div class= "test" style="display:none"></div>'
JavaScript:
$(".test").html(result)
Use class instead of ids and try this
$('.test').html(result)
Try this
$('div').html(result);
or
Instead of id you can use class.
$("div.class_name").html(res);
I assume your html code are:
<div id="#test">xxxx</div><div id="test">cccc</div>
then if you call $("#test"); these will return array with 2 length; so, you had to call each array to update all. I asumme you will update with value 'ddd' to both of #test, then
for(i=0;i<$('#test').length;i++){
$('#test')[i].html('ddd');
}
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
Is there a way in Grails to do conditionals inline on an HTML attribute, for example:
<div class="${if(sec.isLoggedIn()) loggedInClass}">
I'm trying to add a class to certain elements if the user is logged in.
This might work for you:
<div class="${(sec.isLoggedIn()?loggedInClass:null)}">
Or Try this:
<div class="${(sec.isLoggedIn()?'loggedInClass':'null')}">
You can do:
<div class="${sec.loggedIn ? 'loggedInClass' : ''}">