Develop Reference

How to add a class to a span element which is part of an existing <li> tag with jQuery

How can I add a class to a span element for only these spans which are part of li tags with class='error'
per example, this is the HTML which is generated:
<li class="error">
<!--if list has class error, then add also class error to span which is part of that list tag-->
<span class="error"></span>
</li>
This is the code I have so far:
if(status == 'error') {
data.context.addClass('error'); // adds class error to li tag
}

This is easy using JQuery, just select all li items that have the class .error and then use find() to find all the spam elements inside it, finally add the class .error to those:
$(document).ready(function()
{
$("li.error").find("span").addClass("error");
});
span.error {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="">
<span>Parent "li" do not have class error</span>
</li>
<li class="error">
<span>Parent "li" have class error</span>
</li>

This should achieve the expected result. Iterate through all li elements with the error class and find any spans, then add the class error to it.
$('li.error').each(function() {
$(this).find('span').addClass('error');
})

For a pure vanilla JavaScript solution, you can use an attribute selector to find all your li elements that have a class called error. Once you have that list of li elements, just loop thru (using forEach or a for-loop) and append an a span element as a child of the li. The span element should also be given a class attribute called "error" via setAttribute.
function appendErrorSpan(li) {
var errorEl = document.createElement('span');
errorEl.setAttribute('class', 'error');
errorEl.appendChild(document.createTextNode('Error span added!'));
li.appendChild(errorEl);
};
var errorListItems = document.querySelectorAll('li[class="error"]');
errorListItems.forEach(appendErrorSpan);
<li class="">
<span></span>
</li>
<li class="error">
</li>

Instead of using loops you can do it like this-
let a=document.querySelectorAll("li.error > span");
$(a).addClass('error');

Easiest way-
$("li.error > span").addClass('error');

If This is Clicked Show This Else Hide This

I have seen other if else examples on here but nothing specifically addressing jquery "if clicked show this else hide this". Here's a simple code example. I would like to know the cleanest way to show the .redStuff when #red is clicked else hide it and show the other classes when the relative id is clicked.
Here is the HTML:
.redStuff, .blueStuff, .greenStuff {
display: none;
}
<ul id="color">
<li id="red">Red</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
</ul>
<div class="redStuff">Red Stuff</div>
<div class="blueStuff">Blue Stuff</div>
<div class="greenStuff">Green Stuff</div>

Using data attributes is easy once you get the idea.
css
.redStuff, .blueStuff, .greenStuff {
display: none;
}
html
<ul id="color">
<li id="red" data-color="red">Red</li>
<li id="blue" data-color="blue">Blue</li>
<li id="green" data-color="green">Green</li>
</ul>
<div class="redStuff" data-content="red">Red Stuff</div>
<div class="blueStuff" data-content="blue">Blue Stuff</div>
<div class="greenStuff" data-content="green">Green Stuff</div>
jquery
// no need for the ids or classes
// we set data attributes for the html
$("li[data-color]").click(function(){
// next line is for second click, to hide the prev div element
$("div[data-content]").hide();
// we are getting the data-color attr value here
// and for readibility we assigned it to a variable called color
var color = $(this).data("color");
// find the div with the same content and show
$("div[data-content='"+color+"']").show();
});
jsfiddle link to play with codes

This should work.
It's not an "If Then Else" statement exactly, but it accomplishes the logical objective.
var $stuff = $(".redStuff, .blueStuff, .greenStuff");
var $colors = $("#color li a");
$colors.on("click", function(){
// get color from parent (li) id
var color = $(this).parent()[0].id;
// turn all stuff off (because we don't know what came last)
$stuff.attr({style: null});
// turn on clicked stuff class
$("." + color + "Stuff").attr({style: "display:block;"});
});
Demo is here.

Numerous ways to approach this depending on complexity of the layout.
If the order is the same relationship between the <li>'s and the <div> you can use index(). Adding a common class would be helpful
<div class="redStuff stuff">Red Stuff</div>
JS
$('#color li').click(function(){
// "this" is the element event occurred on
var index = $(this).index();
// hide all the "stuff" class and show the matching indexed one
$('.stuff').hide().eq(index).show();
});
Or add data- attributes to target specific element so that index order becomes irrelevant
HTML
<li id="red">Red</li>
JS
$('#color a').click(function(){
$('.stuff').hide().filter( $(this).data('target') ).show();
});
Or by using ID to create a selector
$('#color li').click(function(){
$('.stuff').hide().filter('.' + this.id +'Stuff').show();
});

JQuery getting the second parent not working

I have this HTML:
<li class="chatbox-item">
<div class="item">
<div class="item-header">
X
</div>
</div>
</li>
When a.close-chatbox is clicked, the .item element has to be hidden. However, I just can't seem to go up two levels to hide the .item element.
I have this JS:
$(".close-chatbox").click(function() {
// not working
$(this).parent().parent().hide();
// not working, hides `.chatbox-item` element, and eq(1) doesn't do anything either
//$(this).parents().eq(2).hide();
});
How can I get the .item element to be hidden when the .close-chatbox element is clicked?

Don't assign your action to a var, just use it:
$(function () {
$(".close-chatbox").click(function () {
$(this).parent().parent().hide();
});
});
JSFiddle: http://jsfiddle.net/ghorg12110/tkocx8ng/

You can either use,
$(this).parent().parent().hide();
or you can use .closest("element"),
$(this).closest(".item")

Use .closest() in jquery
$(this).closest('.item').hide();
Fiddle

span text length of column (or li)

I have a mouseover function that changes the background-color of the span of an li element, but the background-color change only changes the background of the span text and not the entire length column. How can I extend the background-color to the entire length of the column without changing the li element's background-color. I do not want to change the li element's background-color because the li element may contain children ul and li elements who's background color I do not want to change.
JSFiddle: https://jsfiddle.net/8d965kbd/
HTML:
<li>
<span class="text">HIGHLIGHT FULL LENGTH (DO NOT HIGHTLIGHT WITH BELOW HIGHTLIGHT)</span>
<ul>
<li>
<span class="text">HIGHLIGHT FULL LENGTH (DO NOT HIGHTLIGHT WITH ABOVE HIGHTLIGHT)</span>
</li>
</ul>
</li>
jQuery:
$(function(){
$(document).on({
mouseenter: function () {
$(this).css('background-color', 'green');
},
mouseleave: function () {
$(this).css('background-color', 'white');
}
}, ".text");
});

May be something like this : https://jsfiddle.net/vtoe5eqx/1/
display:inline-block; //add it to the text class

You can add display:block; onto the span.
https://jsfiddle.net/8d965kbd/3/

Instead of using <span> use <div> instead, the reason is that <span> is just an inline-block element while <div> is a block element.
Meaning <span> width is default to auto which will only base its width on the content while <div> will set its width to 100% regardless of the content, that's why when you apply a background-color change for <span>, it only fills up only by its width.
Update: You can also use other block elements as an alternative aside from <div> such as <p> <h1> ~ <h6>

Hover over one span and change background color of that span plus another one by adding and removing a class

<span id="english">Yes</span>
<span id="spanish">Sí</span>
How can I hover over any of these and change background color to yellow on both. I can't use onmouseout() because the background color changes dynamically due to other scripts.
I'm aware that I can add a class skipping the use of jQuery -although it's a valid choice if all else fails- by using something like:
document.getElementById(id).className += " yellow";
and the css would be:
.yellow {
background-color: yellow
}
My previous solution that included onmouseout() was:
function chbg(color, id1, id2) {
document.getElementById(id1).style.backgroundColor = color;
document.getElementById(id2).style.backgroundColor = color;
}
and the HTML:
<span id="english" onmouseover="chbg('yellow', 'english', 'spanish')" onmouseout="chbg('white','english', 'spanish')">Yes</span>
<span id="spanish" onmouseover="chbg('yellow', 'english', 'spanish')" onmouseout="chbg('white','english', 'spanish')">Sí</span>

Use JQuery hover function instead.
Try this:
$(document).ready(function(){
$("span").hover(
function(){
$('span').css('background', 'yellow');
},
function(){
$('span').css('background', 'white');
});
});
JSFiddle Demo #1 (With Class)
JSFiddle Demo #2 (Without Class)
UPDATE #1
Use toggleClass() function instead.
$(document).ready(function(){
$("span").hover(function(){
$('span').toggleClass('highlight');
});
});
JSFiddle Demo
UPDATE #2
Assign a class to all the span that needs to be highlighted. For example: class="highlight". Using toggleClass() to toggle a class from CSS will add another class now. This way only span with .highlight change color.
JSFiddle Demo

This can be done with only CSS, by adjusting your HTML a bit:
<span id="bghover">
<span>Yes</span>
<span>Sí</span>
</span>
And for the CSS:
#bghover span
{
background-color: white;
}
#bghover:hover span
{
background-color: yellow;
}
So you wrap the two spans into a span or div with id bghover, which is only used as a trigger for CSS :hover. If there's no hover, all spans within #bghover are white, if there is a hover (similar to onmouseover), all spans within #bghover are white.