Develop Reference

Cypress select li and click on child span

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})

jQuery: how to select the exact element of the same class?

Not sure I've formulated my question well, hope the details will cover the issues.
So, I'm building an "artificial" full-height slide-like submenu, and I have an empty container there:
<section class="masking_sublevel">
</section>
Further, I have a bunch of ul elements in my HTML that are hidden by default in their containing section:
I'm updating the HTML part with a more complete piece:
<div id="sldbr_overlay" class="newully">
<section class="masking_sublevel">
</section>
<ul class="sidebar_bumenu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Beauty <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<section class="hidden_ul">
<ul>
<li>Aerobics</li>
<li>Pilates</li>
<li>Yoga</li>
<li>Massage</li>
<li>Peeling</li>
<li>Bikini Area Sugaring</li>
<li>Piercing</li>
<li>Tattoo</li>
<li>Shaping</li>
<li>Sauna</li>
<li>Mud SPA</li>
<li>Needle Therapy</li>
<li>Shaping</li>
<li>Leech Therapy</li>
<li>Thai Massage</li>
<li>Wushu</li>
</ul>
</section>
</li>
<li>Clothing</li>
<li>Computers</li>
<li>Construction</li>
<li>Entertainment</li>
<li>Financial</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Food <i class="fa fa-chevron-right bu_chevright"></i>
<i class="fa fa-chevron-down bu_chevdown"></i>
</a>
<ul class="hidden_ul">
<li>Pizza</li>
<li>Cheboorackee</li>
<li>Khash</li>
<li>Pork</li>
<li>Hamburgers</li>
<li>Greek Salad</li>
<li>BBQ</li>
<li>Tortillas</li>
<li>Spaghetti</li>
<li>Pasta</li>
<li>Ice Cream</li>
<li>Jelly Sugar</li>
<li>Lolly Pop</li>
<li>Cupcakes</li>
</ul>
</li>
<li>Health</li>
<li>Kids</li>
<li>Services</li>
<li>Travel</li>
<li>Tourism</li>
</ul>
<div class="pzik">
<a href="javascript:void(0);" data-toggle=".sidebar_wrapper" id="sidebar-toggle_abs">
<img src="svg/filter.svg" class="filter_icon hvr-wobble-bottom">
</a>
<a href="javascript:void(0);" id="go-2-top" class="gotop_chevron">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
So, what I'm doing is selecting the above mentioned ul and put it within the empty section on a hover event and emptying it on a mouseleave, like this:
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
$(importedUl).empty();
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});
});
The problem is that with this piece of code I probably select just the first ul with the class of .hidden_ul', since as I hover on the other items (randomly), it keeps on loading the content of the first list. How can I select the VERY ul element with the same class that I'm currently hovering?
Thanks!

So you want to traverse from the element that has mouseover to the parent ul, which is a child of the grand-parent .hidden_ul
// remove this, it has no context to each drop down
// var hiddenUl = $('.hidden_ul ul');
$(dropdownLi).on('mouseover',function(){
$(this).closest('.hidden_ul').children('ul').appendTo(maskingSubLvl);
// though if there are no child uls in your lis, this will do
$(this).closest('ul').appendTo(maskingSubLvl);

Since your hidden_ul is direct child of .dropdown you need to get it using its parent context as below:
$(dropdownLi).on('mouseover',function(){
var hiddenUl=$(this).find('.hidden_ul')[0];//find the child
$(hiddenUl).appendTo(maskingSubLvl);
$(maskingSubLvl).css('display','block');
});
Update
Instead of appendTo try keeping changing the html of .maskingSubLvl so that no need to remove the content again before appending another. For Ex:
DEMO
$(document).ready(function(){
var dropdownLi = $('li.dropdown');
var maskingSubLvl = $('.masking_sublevel');
var importedUl = $('.masking_sublevel ul');
$(dropdownLi).on('mouseover',function(){
$(maskingSubLvl).css('display','block');
var hiddenUl = $(this).find('.hidden_ul ul').clone(); //clone the content
$(maskingSubLvl).html(hiddenUl);
});
$(dropdownLi).on('mouseleave',function(){
$(maskingSubLvl).css('display','none');
});
$(maskingSubLvl).on('mouseenter',function(){
$(this).css('display', 'block');
});
});

How to change css class from javascript?

Suppose I want to dynamically via javascript or jquery change the class of the following to class="active" How do I achieve it?
<!-- Navigator -->
<div style="position: abolute; top: 50px" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul id="yw0" class="nav">
<li class="active">Company</li>
<li><i class="fa fa-lightbulb-o"></i>&nbspFAQs</li>
<li><i class="fa fa-question-circle"></i>&nbspHelp Center</li>
<li><i class="fa fa-newspaper-o"></i>&nbspPress</li>
<li>Careers</li>
<li><i class="fa fa-envelope-o"></i>&nbspContact Us</li>
</ul>
</div>
</div>
</div>
I want to actually know how can I change the class of the li tag?
<li class="active">
I know that there is a method that I can use http://api.jquery.com/addclass/
But how do I do it with my example above.

For Adding class in any HTML Element
$("#id_of_element, .class_of_element, directly_name_of_element").addClass('active');
For Removing class from any HTML Element
$("#id_of_element, .class_of_element, directly_name_of_element").removeClass('active');

If i understand your expected behaviour, you could delegate event to UL element for using following logic on LI click:
$("#yw0").on('click', 'li:not(.active)', function () {
$(this).add('li.active').toggleClass('active');
});
-DEMO-
$(function () {
$("#yw0").on('click', 'li:not(.active)', function () {
$(this).add('li.active').toggleClass('active');
});
});
li.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position: abolute; top: 50px" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul id="yw0" class="nav">
<li class="active">Company
</li>
<li><i class="fa fa-lightbulb-o"></i>&nbspFAQs
</li>
<li><i class="fa fa-question-circle"></i>&nbspHelp Center
</li>
<li><i class="fa fa-newspaper-o"></i>&nbspPress
</li>
<li>Careers
</li>
<li><i class="fa fa-envelope-o"></i>&nbspContact Us
</li>
</ul>
</div>
</div>
</div>

http://api.jquery.com/addclass/
In JQuery.
$("li").addClass("active");
You will need a better selector for getting the li you require.

$("li").addClass("active");
And in your CSS just have
.active {
background: red;
}
Although your best bet is to know which is active and just append that class to the li tag on the respective page, assuming you're talking about navigation: for example, on your help-center.html, just add
<li class="active"> rather than <li>

You can add classes easily with jquery using add class, and remove with, yep you guessed it, remove class
If you want to change a class, simple remove the old one and add the new
$('#something').removeClass.('oldClass').addClass('newClass');
N.b. links are to jquery docs

Below code will add the class to the last li..
$(document.ready(function() {
$('.container li:last-child').addClass('active');
});

To select an item by class:
$('.active').addClass('.non-active');
$('.active').removeClass('.active');
To select an item by type:
$('li').addClass('.non-active');
$('ii').removeClass('.active');
To select an item by id:
$('#some_id').addClass('.non-active');
$('#some_id').removeClass('.active');

Hide my menu using jquery

I have the following bootstrap html menu:
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown menustatus">
<a class="dropdown-toggle" href="#">
<div class="busy-status"></div>
<div class="online-status" style="display:none;"></div>
</a>
<ul class="dropdown-menu dropdown-user" style="margin-top: 10px;">
<li class="status">
<i class="fa fa-circle online"></i> Online
</li>
<li class="status">
<i class="fa fa-circle busy"></i> Busy
</li>
</ul>
</li>
</ul>
I'm trying to hide the menu when the user click on any item, like this:
$("#online-status").click(function (){
$(".busy-status").hide();
$(".online-status").show();
$("li.dropdown.menustatus.open").removeClass("open");
});
$("#busy-status").click(function (){
$(".online-status").hide();
$(".busy-status").show();
$("li.dropdown.menustatus.open").removeClass("open");
});
But it does not work.
I also tried:
$(".dropdown.menustatus.open").removeClass("open");
or
$("dropdown.menustatus").removeClass("open");
or
$(".menustatus").removeClass("open");
or
$(".open").removeClass("open");
But I couldn't hide the menu.
What I'm doing wrong.
Thanks for your help

#online-status is an anchor.
Try:
$("#online-status").click(function(e){
e.preventDefault();
....
});

Check how you did it with the other elements in the click events: You can in a similar way use .hide() and .show(), or even .toggle() if needed.
$(".menustatus").hide();
How specific the selector needs to be is up to you to decide / find out.
If you absolutely want to do it the "class way", my guess is that your ".open" class sets the visibility or display properties to visible/block or something similar to show the element, but your ".menustatus" does not seem to hide it. What I mean is: if you remove the .open class from the element, there is nothing that specifies whether it should be hidden or not. Try this:
.menustatus {
display: none;
}
.menustatus.open {
display: block; // Add !important if needed.
}
Change "block" to whatever you want, as long as it's not none.

Selecting Closest Match using jQuery

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.