Develop Reference

Correct way to check if ul have li element using Jquery

I am trying to check if my <ul> has a <li> element in Jquery, if it does then it displays a div if not it hides it. So far I have the following code:
$(document).ready(function () {
$('#div-1 .div-2').each(function (index, item) {
var colorCount = $(item).find('.item ul li').length;
$(item).attr('data', colorCount);
if (colorCount > 0 ) {
$('.colourClass').show();
}
else {
$('.colourClass').hide();
}
});
});
Is this correct or is there a stricter and better way to do it?

I'd advise you to use toggle() function to achieve your requirements.
const $ul = $('#test');
$('#div').toggle($ul.find('li').length > 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='test'>
<li>asdas</li>
</ul>
<div id='div' style='display: none;'>
Show if li exist!
</div>

alert when multiple elements with the same class name have an added class

I need an alert to show up when all elements have had a class added to them
html
<ul class="container">
<li class="box"> </li>
<li class="box"> </li>
<li class="box"> </li>
</ul>
jquery -
$(document).ready(function() {
$('.box').click(function() {
$(this).addClass('Boxaddedclass');
});
});
After each box is clicked, a class of 'Boxaddedclass' is added to each list with the class of '.box'.
jquery -
$(document).ready(function () {
$(".box").click(function () {
if($(".box").hasClass("Boxaddedclass")) {
alert('all boxes have the added class')
}
});
At the moment, after I click each individual Box class, an alert comes up each time, I need the alert to appear when all of them have the added class rather than individually. Any way around this?

Compare the number of elements classed .box with .Boxaddedclass
var boxCount = $(".box").length;
var addedBoxClass = $(".Boxaddedclass").length;
if (boxCount === addedBoxClass) {
alert("All boxes have added the class"); //note that I don't support alert, you really should console.log it, or do something fancier
}

$(".box.Boxaddedclass") selector could be used to check .box elements also has .Boxaddedclass class.
Only using $(".Boxaddedclass") will not consider .box elements having Boxaddedclass class!
$('.box').click(function() {
$(this).addClass('Boxaddedclass');
});
$('button').on('click', function() {
var boxCount = $(".box").length;
var addedBoxClass = $(".box.Boxaddedclass").length;
if (boxCount === addedBoxClass) {
alert("All boxes have added the class");
} else {
alert('Not yet!')
}
});
.Boxaddedclass {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="container">
<li class="box">Content...</li>
<li class="box">Content...</li>
<li class="box">Content...</li>
</ul>
<div class="Boxaddedclass">Other content not having `box` class but `Boxaddedclass`</div>
<br>
<button>Check</button>

jquery make action when link menu item is clicked

I have three menu items here:
JSFIDDLE: FIDDLE LINK
<div class="home-content">
<div class="menu-bar">
<ul class="nav nav-tabs">
<li class="active">Blue<sup>beta</sup></li>
<li>Green<sup>beta</sup></li>
<li>Red</li>
</ul>
</div>
By default link blue is active.
I want whenever any link green or red is clicked, it should be active
Color of the label should be changed as per the link selected
I am facing trouble in this points.

You could add a DATA color on your li like that :
<li data-color="#0f0">Green<sup>beta</sup></li>
then use this code :
$(function () {
$(".menu-bar li a").click(function () {
$('.active').removeClass('active'); //Remove the current active item
var color = $(this).closest('li').addClass('active').data('color'); //add class the the target and save his data attribute
$("#l1").css("color", color); //Change color
});
});
Fiddle : http://jsfiddle.net/ZjgV4/6/

Something like this?
$(function () {
$(".menu-bar li a").click(function () {
$(".menu-bar li").removeClass("active");
$(this).parent().addClass("active");
});
});
http://jsfiddle.net/3mhCW/1/

Without completely doing everything, this should point you on the right track. A few things to note about your code - You should pass in the e event, to the click handler and use jQuery's e.preventDefault(); to stop the link. Also, you need to quote the value in the css function. .css("color", "red") otherwise you will get an undefined error that red is not defined. Instead of manipulating the css of the elements, I would use add/removeClass respectively and style the elements with css.
$(function () {
$(".menu-bar li a").click(function (e) {
e.preventDefault(); // stop the link from following the href
// remove the active class from everything
$(".active").removeClass("active");
// $(this).css("color", "red");
$(this).addClass("active");
});
});

I included the code here.
basically, i inserted the color name to a class each color has its own class and each LI has a global attribute data-* with the value of the color (the name of the class)
HTML:
add to all the li the attribute data-color="blue"
Add CSS:
.blue{
background-color:blue;
}
.green{
background-color:green;
}
.red{
background-color:red;
}
jQuery:
$(function () {
$(".menu-bar li a").click(function () {
$('.menu-bar li.active').removeClass('active');
$(this).parent().addClass('active');
$("#l1").attr('class',$('.menu-bar li.active').attr('data-color'));
});
});

Toggle div on link click

http://jsfiddle.net/FsCHJ/2/
what now happens is, whenever I have another link example it will also use this link as the toggle button. I just want Toggle Edit Mode to be toggling hidden div's on/off. So I tried to change $("a").click(function () to $("toggle").click(function () and <a>Toggle Edit Mode</a> to Toggle Edit Mode`, but doesn't work. Any idea's?
HTML
<li><a>Toggle Edit Mode</a>
</li>
<div class="hidden rightButton">hello</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
$(document).ready(function () {
$("a").click(function () {
$("div").toggleClass("hidden unhidden");
});
});

You want this.
<li><a class="toggle">Toggle Edit Mode</a>
$(".toggle").click(function () {
$("div").toggleClass("hidden unhidden");
}
You cannot use $("toggle"), because this looks for the html tag <toggle>. Instead add a class toggle to the link for which you want to toggle.

Use "ID" selector.
http://jsfiddle.net/FsCHJ/1/
There can be many classes (class=...) in one page but juste on id (id=...) per page. More informations here.
Javascript:
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
Html:
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>
$(document).ready(function () {
$("#toggle").click(function () {
$("div").toggleClass("hidden unhidden");
});
});
.hidden {
display: none;
}
.unhidden {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li><a id="toggle">Toggle Edit Mode</a></li>
<div class="hidden rightButton">hello</div>

Use .className selector:
$(".toggle").click(function () {});
You can also use jQuery's toggle function.
$(".toggle").click(function () {
$("div").toggle();
});
Created fiddle to demonstrate toggle.

This worked for me. Allowing me to show or hide text with the same link. I associate the link with the div i want to show. This works in lists with multiple records, each record having it's own ID.
<a class="showHideToggle div1">View Details</a>
<div id="div1" style="display:none;">Record 1 details goes here</div>
<a class="showHideToggle div2">View Details</a>
<div id="div2" style="display:none;">Record 2 details goes here</div>
<script>
$(document).ready(function () {
$(".showHideToggle").click(function (ctl) {
var linkedDivName = $(this).attr('class').replace('showHideToggle ', '');
var divToToggle = $("#" + linkedDivName);
//alert('current status: ' + divToToggle.css('display'));
if (divToToggle.css('display') == 'none') {
divToToggle.css("display", "block");
$(this).text("Hide Details");
} else {
divToToggle.css("display", "none");
$(this).text("Show Details");
}
});
});
</script>

remove class of group of links once another link is clicked

These group of links are my nav elements. var make_button_active removes and inserts class active once clicked into the link. With CSS, class active assigns an orange color to the text of the link. I have another link which is outside of this group. Its a logo as link which goes to #home. I would like that once this is clicked the class active is removed from the links inside the ul.menu. This way the nav elements wont remain colored in orange when #home is clicked. I've tried it alone but I'm a beginner with javascript.
Could you help me with this quest?
HTML:
<nav>
<div id="logo">
<img src="_img/logo.png" alt="DR logo" />
</div>
<div id="categories">
<ul class="menu">
<li>ABOUT ME</li>
<li>SHOWCASE</li>
<li>HOW DO I WORK</li>
<li>LETS MEET</li>
</ul>
</div>
<hr>
</nav>
CSS:
.menu li.active a {
color: #ff530d;
}​
JQUERY:
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
);
//Add the clicked button class
$(this).addClass('active');
}
var classOut = function()
{
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
</script>

I rewrote your entire JavaScript, does this help?
I changed your JavaScript to:
$(document).ready(function()
{
$('.menu a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
$(this).addClass('active');
});
$('#logo > a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
});
});
​

At first: jQuery !== JavaScript
Also, #home wont select your home link, because it does not select the href, but the id.
Use instead $("#logo a").click(classOut);
Also, your function make_button_active should look something like this:
var make_button_active = function() {
$('.active').removeClass('active');
$(this).addClass('active');
}
You don't need to iterate over all the siblings, your active can only be on one element at once, you can just select this and remove the class before setting it on the newly selected element.
Finally, you do not necessarily have to do a function expression var make_button_active = function(){...}, a function declaration is completely okay in your case: function make_button_active(){...}. However, often it is good to use function, and not like Sam did using anonymous functions, because you can then reuse those functions easily.
Your entire script should look like this:
<script type="text/javascript">
function make_button_active(){
$('.active').removeClass('active');
$(this).addClass('active');
}
function classOut(){
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#logo a").click(classOut);
});
</script>

There is no element with ID of home in your markup:
<img src="_img/logo.png" alt="DR logo" />
You are using ID selector and your selector doesn't select the element with #home href attribute. You can add ID to your element or use attribute selector:
$("a[href='#home']").click(classOut);
Also you don't need to use each method:
var make_button_active = function() {
$(this).addClass('active').siblings().removeClass('active')
}
var classOut = function() {
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
http://jsfiddle.net/hJdXU/