I am trying to select li and click/check on span which is checkbox but, can't do that.
Here, following I tried.
<div id="list-widget">
<ul class="tree">
<li class="tree-switcher-close"> .... </li>
<li class="tree-switcher-close">
<span class="tree-checkbox"> //I want to Click on this
<div class="container">
<span class="checkmark"></span>
</div>
</span>
<span title="abc Account">
<span class="tree-title">abc Account</span>
</span>
</li>
<li class="tree-switcher-close">
<span class="tree-checkbox"></span>
....
</li>
<li class="tree-switcher-close">
<span class="tree-checkbox"></span>
....
</li>
</ul>
Here, in above code I want to select li where "abc account" and once found want to click on span which have class tree-checkbox. So, I tried.
cy.get('div[id*="list-widget"]')
.find('li')
.contains('abc Account')
.get('.tree-checkbox').click({force: true});
But, it says there are multiple elements found. above code find the li which have contains('abc Account') but, can't span within that li.
The main problem is with .get('.tree-checkbox'). It "forgets" all the preceding path, so you might as well start with cy.get('.tree-checkbox') and of course that gives multiple elements.
Change that to .find('.tree-checkbox').
Also combine li and abc Account in one selector, because .contains('abc Account') by itself takes you to the <span class="tree-title">abc Account</span> which has no tree-checkbox.
cy.get('div[id="list-widget"]')
.find('li:contains("abc Account")')
.find('.tree-checkbox')
.click({force:true});
Other variation that works (but is more verbose)
cy.get('div[id*="list-widget"]')
.find('li')
.contains('abc Account')
.parent()
.parent()
.find(".tree-checkbox")
.click({force:true})
Related
I have some divs on a page in this order as below. When someone clicks a link inside the UL .list-links I want to capture the value of
<span class="asa_portlet_title">Title here</span>
in a variable. I've tried using siblings and closest but it always returns empty.
--
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name
Link name
Link name
Link name
</li>
</ul>
</div>
</div>
--
$('[ul.list-links a').click(function() {
var _portletTitle = $(this).siblings('.my_portlet').text();
});
Open to pure javascript method as well. Basically I have a number of divs on the page containing links, and those divs have another div above it where the title exists
Would anyone be able to put together a small working sample?
You are not trying to get the siblings, you are trying to get the sibling of the parent .links of this.
Also you have to prevent the default action of the a element. You can do that by calling preventDefault() on the event object.
$('ul.list-links a').click(function(event) {
event.preventDefault();
var _portletTitle = $(this).closest('.links').prev('.my_portlet').text();
console.log(_portletTitle);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name
Link name
Link name
Link name
</li>
</ul>
</div>
</div>
<div class="my_portlet" style="display:none;">
<span class="asa_portlet_title">Title here 2</span>
</div>
<div class="links">
<div class="">
<ul class="list-links">
<li class="margin-bottom-medium">
Link name 2
Link name 2
Link name 2
Link name 2
</li>
</ul>
</div>
</div>
I am having a ul with li and <i> tag as children. The code is as below
<li class="accordion put">
<span><i class="fa fa-plus-circle"></i></span><span style="padding-left:5px;font-size: 18px;">Topic-Heading</span>
<ul class="panel2" style="display: none;">
<li class="testing"><i class="fa fa-chevron-right"></i> section 1</li>
<li class="testing"><i class="fa fa-chevron-right"></i> section 2 </li>
<li class="testing"><i class="fa fa-chevron-right"></i> section 3</li>
<li class="testing"><i class="fa fa-chevron-right"></i> section 4 </li>
</ul>
</li>
I have the below jquery code to toggle the class on click on the li as shown below:
$(".put.accordion" ).click(function() {
$(this).children("ul").toggle("slow");
$(this).find("i").toggleClass("fa-plus-circle fa-minus-circle");
});
The above code is working fine when I click on the li tag but since I have mentioned find('i') both the i tags are changing. I need to toggle only the i element having the class as fa-plus-circle and to ignore the i with class fa-chevron-right.
Please let me know where I am going wrong.
If you want a class independent way of selecting the first <i>, you can use .first() to reduce the matched results to the first returned <i> only.
In your case you could replace this line:
$(this).find("i").toggleClass("fa-plus-circle fa-minus-circle");
With this:
$(this).find("i").first().toggleClass("fa-plus-circle fa-minus-circle");
A generic example:
$('body').on('click', function() {
console.log( $(this).find('i').first().text() )
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click anywhere to return the contents of the first <code><i></code>.</p>
<i class="first">First</i>
<i class="second">Second</i>
<i class="third">Third</i>
You can use the same syntax in find() as with other jQuery selectors. Just specify the class:
$(".put.accordion" ).click(function() {
$(this).children("ul").toggle("slow");
$(this).find("i.fa-plus-circle i.fa-minus-circle").toggleClass("fa-plus-circle fa-minus-circle");
});
You can find with :
find("i[class=fa-plus-circle]")
Detail in : https://www.w3schools.com/cssref/css_selectors.asp. hope to help you
I want to move some span elements to closest div. I found the solution to my problem but it does not work for me. I have some Html code:
<ul>
<li>
<a><span>Some info</span></a>
</li>
<div class="cl1">...</div>
<li>
<a><span>Some info 2</span><a>
</li>
<div class="cl1">
...
</div>
...
</ul>
and to move <span> like this:
$('span').each(function () {
$(this).parent().parent().closest('.cl1').append(this);
})
but nothing happened. Any help would certainly be appreciated
you can't put a div in a ul, only li's.
your html has to be valid (a's, ul need to be closed)
Closest searches anscetors, not siblings.
since your markup is not valid as is, i'm not sure if you want the divs in the list or not. This example removes them from the lis, which breaks the list into two lists.
$('button').click(function() {
$('span').each(function() {
var $div = $(this).closest('ul').siblings('.cl1');
$(this).clone().appendTo($div);
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a><span>Some info</span></a>
</li>
</ul>
<div class="cl1">...</div>
<ul>
<li>
<a><span>Some info 2</span></a>
</li>
</ul>
<div class="cl1">...</div>
<button>Do Stuff</button>
Anyone know how can I get the id of based on the clicked element inside of it using jQuery?
This is my html tag:
<div id="grade_contamina">
<ul id="ul_element">
<!---My first li--->
<li id="first_id">
<p>
Apple
</p>
<!---Button for apple---->
<span class="fruits" id="btn_apple">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
<!---My second li--->
<li id="second_id">
<p>
Grapes
</p>
<!---Button for grapes---->
<span class="fruits" id="btn_grapes">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
</ul>
</div>
Every LI element there is 3 button, the delete, send, and download.
let say from the 'apple LI element', i clicked the delete. i need to delete this LI element base on its id, or i want to send this base on its id. now how can i get the id of LI or what is the best way to get the ID of LI element?
aside from getting the id, i want to fire a JQUERY effect when the button delete is clicked.
I want this happen if the button delete is clicked.
**Remove the LI element which is clicked
**Apped a new LI element at the last LI element of ul using "FadeIn Effect".
this is my pseudo code
if button is clicked{
var the_id = get the id of LI where the button is clicked
now which one of button is clicked?
if button send is clicked{
some code here, i will need here the id to send...
}else if button download is clicked{
some code here, i will need here the id too..
}else if button delete is clicked{
remove the LI element (With fadeOut effect if possible)
append a new LI element at the end of LI whith fadeIn effect
}
//End of Statement
}
Anyone can help me? I only have small knowledge in jQuery, so any help will be appreciated. Thank You!!!
To get the id of li on the a click, you need to use closest.
This will get the closest li ancestor of the clicked element.
$('#grade_contamina').on('click', 'a', function() {
alert($(this).closest('li').attr('id'));
return false;
});
<div id="grade_contamina">
<ul id="ul_element">
<!---My first li--->
<li id="first_id">
<p>
Apple
</p>
<!---Button for apple---->
<span class="fruits" id="btn_apple">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
<!---My second li--->
<li id="second_id">
<p>
Grapes
</p>
<!---Button for grapes---->
<span class="fruits" id="btn_grapes">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
</ul>
</div>
$(document).ready(function(){
$('#grade_contamina').on('click', 'a', function() {
var btn_name = $(this).attr('class')
var id = $(this).closest('li').attr('id');
if(btn_name == 'btn_send_once'){
alert(btn_name+" within "+id);
//your code
}else if(btn_name == 'btn_delete_once'){
alert(btn_name+" within "+id);
}else{
alert(btn_name+" within "+id);
}
})
})
The above code will get you the button's class along with its li's id
You could use jQuerys .attr(propertyname) like I did in this fiddle:
https://jsfiddle.net/d907e6gm/
$('ul > li').click(function(){
alert($(this).attr('id'));
});
I am not going to give all the code. I will just show you, how to get list item id and which button you have clicked.
$(document).ready(function(){
$("#ul_element a").on("click",function(){
idli = $(this).closest("li").attr("id"); // your list item id.
val = $(this).text(); // your link text
});
});
DEMO
Try filtering .parents() of clicked a , returning id of a parent li
$("#grade_contamina a").on("click", function() {
console.log($(this).parents("li")[0].id)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="grade_contamina">
<ul id="ul_element">
<!---My first li--->
<li id="first_id">
<p>
Apple
</p>
<!---Button for apple---->
<span class="fruits" id="btn_apple">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
<!---My second li--->
<li id="second_id">
<p>
Grapes
</p>
<!---Button for grapes---->
<span class="fruits" id="btn_grapes">
<a class="btn_send_once">Send to Students</a>
<a class="btn_delete_once" >Delete</a>
<a class="btn_download_once">Download</a>
</span>
</li>
</ul>
</div>
I am having trouble selecting the closest match. I already tried .closest, .next, and .nextall; I also tried using (this), but I think I'm using them incorrectly.
Here's what I want to acheive:
When .show is clicked, the closest .list-content will toggle and the closest toggleClass icon-rotate-180 too.
<ul class="list-unstyled">
<li class="list-menu">
<a href="javascript:void(0);" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
</li>
<li class="list-content">Hidden Content until Clicked</li>
<li class="list-menu">
<a href="javascript:void(0);" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
</li>
<li class="list-content">Hidden Content until Clicked</li>
</ul>
<script>
$(document).ready(function() {
$(".list-content").hide();
$(".show").click(function() {
$(".icon-chevron-down").toggleClass("icon-rotate-180");
$(".list-content").toggle();
});
});
</script>
Firstly, your HTML is invalid as you cannot have a div element as a direct child of a ul. With that in mind, try this:
<ul class="list-unstyled">
<li class="list-menu">
<a href="#" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
<div class="list-content">Hidden Content until Clicked</div>
</li>
<li class="list-menu">
<a href="#" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
<div class="list-content">Hidden Content until Clicked</div>
</li>
</ul>
$(".show").click(function(e) {
e.preventDefault();
$(".icon-chevron-down", this).toggleClass("icon-rotate-180");
$(".list-content", $(this).closest('li')).toggle();
});
ul/li is the wrong case here. The second li is in relation to the first li. Please use dl, dd and dt instead - this is not the perfect match but better than ul/li!
a is for links but you dont call a url. Please use the dd itself or a span so you dont need the javascript:void(0); and no e.preventDefault();.
Date of Operations
Hidden Content until Clicked
<dd class="list-menu show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</dd>
<dt class="list-content">Hidden Content until Clicked</dt>
$(".show").click(function(e) {
$(this).closest(".icon-chevron-down").toggleClass("icon-rotate-180");
$(this).next("dt.list-content").toggle();
});
(i copied a part of RoyMcCrossan's answer from Selecting Closest Match using jQuery)
Sorry structure broken, looks like a bug in Stackoverflow.