Develop Reference

How do I toggle the background colors within a list of divs?

From a list of items, each in separate divs, the user can select and click only one. The background color should change on the selected one. If the user changes their mind, they can select another one, and the background color should change to the selected color and all the other divs on the list should change back to the default background color.
It's basically the same logic as a radio button on a form. Only one can be selected at a time.
How do I achieve this?
I have attempted to use the element.classList.toggle property. But it only handles each individually. Are there a javascript command(s) to handle this?
<style>
.teamSelected{
background-color: red;
border-radius: 4px;
}
</style>
<div onclick="toggleBackground(team1)">
<div id="team1">
</div>
</div>
<div onclick="toggleBackground(team2)">
<div id="team2">
</div>
</div>
<div onclick="toggleBackground(team3)">
<div id="team3">
</div>
</div>
<script>
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
element.classList.toggle("teamSelected");
}
}
</script>
Thanks!

You are passing variables to the function, which don't exist. You need to put them in quotes, because the function is expecting strings.
const allDivs = document.querySelectorAll('.div');
function toggleBackground(teamnumber) {
var element = document.getElementById(teamnumber);
if (element) {
allDivs.forEach(function(el){
el.classList.remove('teamSelected');
});
element.classList.add("teamSelected");
}
}
.toggle > div {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.teamSelected {
background-color: red;
border-radius: 4px;
}
<div onclick="toggleBackground('team1')" class="toggle">
<div id="team1" class="div">
</div>
</div>
<div onclick="toggleBackground('team2')" class="toggle">
<div id="team2" class="div">
</div>
</div>
<div onclick="toggleBackground('team3')" class="toggle">
<div id="team3" class="div">
</div>
</div>

seems like this is something you want?
let x = ('.something');
$(x).on('click', function(){
$(x).css('background','blue');
$(this).css('background', 'green');
});
.something{
width: 100px;
height: 100px;
background: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="something">
<div id="team1">
</div>
</div>
<div class="something">
<div id="team2">
</div>
</div>
<div class="something">
<div id="team3">
</div>
</div>

Cannot add class to element children

I'm trying to find an element in my HTML file based on its parent class name and then add a class to it. I've tried the solution in here but it won't work. also, I've tried to log the child class name to see if it's working but it will return undefined. My HTML file is something like this:
$(document).ready(function () {
console.log($(".grid-container").find(">:first-child").className);
$(".grid-container").find(">:first-child").toggleClass("search-controller");
});
.search-controller {
height: 100%;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ui-view="" class="grid-container ng-scope" style="">
<div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope">
This is test data
</div>
</div>

To get the class name from jQuery object you have to use prop(). Try to set some style to the element so that the changes are visible (like color):
$(document).ready(function () {
console.log($(".grid-container").find(">:first-child").prop('class'));
$(".grid-container").find(">:first-child").toggleClass("search-controller");
});
.search-controller {
height: 100%;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ui-view="" class="grid-container ng-scope" style="">
<div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope">
This is test data
</div>
</div>

Use addClass instead of toggleClass.toggleClass class will require an event like click to toggle the class.
$(document).ready(function() {
//console.log($(".grid-container").find(">:first-child").className);
$(".grid-container").find(">:first-child").addClass("search-controller");
});
.search-controller {
height: 100%;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ui-view="" class="grid-container ng-scope" style="">
<div ng-controller="citySearchController" ng-init="initialize()" class="ng-scope">Test
</div>
</div>

Reorder divs with CSS? Insert parent 1 between children of parent 2

This is what I have:
<div class="container>
<div class="parent1"></div>
<div class="parent2">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
This is what I want:
<div class="container>
<div class="parent2">
<div class="child1"></div>
<div class="parent1"></div>
<div class="child2"></div>
</div>
</div>
Is this possible with only CSS or JavaScript (no jQuery)?
Even if the HTML doesn't move, as long as they appear in that order on the page that would be perfect.

You can do it with Javascript: document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
Demo:
function reorder() {
document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
}
.container * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
.parent1 {
color: red;
border-color: red;
}
.child1 {
color: blue;
border-color: blue;
}
<div class="container">
<div class="parent1">I'm parent 1!</div>
<div class="parent2">
I'm parent 2!
<div class="child1 ">I'm child 1!</div>
<div class="child2 ">I'm child 2!</div>
</div>
</div>
<button onclick='reorder();'>Reorder!</button>
Note: Css is only for better looks

With Javascript:
//Remove the parent 1 div from the container div
document.getElementsByClassName('container')[0].removeChild(document.getElementsByClassName('parent1')[0]);
//Insert into div between children
const parent2 = document.getElementsByClassName('parent2')[0];
let divEle = document.createElement('div');
divEle.className = 'parent1';
parent2.insertBefore(divEle, parent2.querySelector('.child2'));

To make this work, I would advise that you remove the div.parent2 around the child classes.
Therefore the code becomes
<div class="container parent">
<div clas="parent1"></div>
<div class="child1"></div>
<div class="child2></div>
</div>
then you can use flexbox to do this
.parent{display: flex};
.child1{order:1}
.parent1{order:2}

Change Elements HTML but Ignore Last Child

With the way I have my HTML marked up....
<textarea></textarea>
<div class="body">
<div class="content">don't change this</div>
</div>
Is it possible to change the html inside of .body without changing the html inside of .content?
EDIT:
I'm working on my code editor and my <script> tag in this case is replaced with .content, and <body> tag is replaced with .body.
The .before API seems to be the best solution for my case except if only 3 characters are added (ex. lol). The result in .body is (ex. lolollol)
$('textarea').keyup(function() {
$('.content').before(this.value)
return false
}).trigger('keyup')
textarea {
width: 98%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div class="body">
<div class="content">don't change this</div>
</div>

This is tricky, because .body may contain text nodes.
jQuery's contents() method helps :
$('textarea').keyup(function() {
$('.body')
.contents() //get both text nodes and element nodes
.each(function() {
if(this.className !== 'content') {
this.nodeValue= this.innerHTML= ''; //nodeValue needed for text nodes,
//innerHTML for element nodes
}
});
$('.content').before(this.value);
}).trigger('keyup');
textarea {
width: 98%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
<ol>
<li>test data here</li>
</ol>
</textarea>
<div class="body">
<div class="content">don't change this</div>
</div>

One workaround would be to get the reference to the .content element and append() it back in to the .body element after re-setting the html(). Try this:
$("textarea").keyup(function() {
var $content = $('.content');
$(".body").html(this.value).append($content);
}).trigger("keyup")
textarea {
width: 98%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div class="body">
<div class="content">don't change this</div>
</div>

you can append into $contentrather than changing the entire html
$('textarea').keyup(function(){
$('.body').html(this.value).append($content)
}).trigger('keyup');
fiddle : https://jsfiddle.net/atg5m6ym/3320/

Keep HTML, CSS, and JS separate. See Snippet.
SNIPPET
$(".html").keyup(function() {
$(".body").html(this.value)
}).trigger("keyup")
$(".css").keyup(function() {
$(".style").html(this.value)
}).trigger("keyup")
$(".js").keyup(function() {
$(".script").html(this.value)
}).trigger("keyup")
textarea {
width: 98%;
height: 100px;
}
.tag {
font: 700 16px/1.45 'Consolas';
color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<legend>HTML</legend>
<textarea class="edit html">
</textarea>
</fieldset>
<fieldset>
<legend>CSS</legend>
<textarea class="edit css">
</textarea>
</fieldset>
<fieldset>
<legend>JavaScript</legend>
<textarea class="edit js">
</textarea>
</fieldset>
<hr/>
<section class="printer">
<div class="tag"><html></div>
<div class="tag"><head></div>
<div class="tag"><style></div>
<div class="print style">
</div>
<div class="tag"></style></div>
<div class="tag"></head></div>
<div class="tag"><body></div>
<div class="print body">
</div>
<div class="tag"><script></div>
<div class="print script">
</div>
<div class="tag"></script></div>
<div class="tag"></body></div>
<div class="tag"></html></div>
</section>

How to get the child of a parent div element

If I have a DOM structure like the following:
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(".parent .sub-parent-b .child-b").css({
"background-color": "blue"
});
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
I could technically use normal css, but it is not flexible enough.
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(".parent .sub-parent-b .child-b").css({
"background-color": "blue"
});
/*
In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.
*/
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="a">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
<div class="parent" id="b">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
In this case, my first aproach of using parent made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.

You can go up the chain, and you can also go back down the chain. This way the selectors stay within the "this" element.
$(function() {
$(".child-a").click(function() {
// change `.child-b` to green
// I can go higher into the chain
$(this).parents(".parent").css({
"background-color": "black"
});
// I can use css to get `.child-b` to blue
$(this).parents(".parent").find('.child-b').css({
"background-color": "blue"
});
/*
In this case, my first aproach of using `parent` made sure that the change only apeared on that specific css, or in #a, but not on #b
While the use of css could only get me to change things in both #a and #b
So how could I manage to do something like:
#a .sub-parent-a .child-a is clicked, so only #a .sub-parent-b .child-b changes, and not #b .sub-parent-b .child-b.
*/
});
});
div div div {
width: 100px;
height:100px;
background-color: red;
border:1px black dashed;
}
.child-a {
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="a">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>
<div class="parent" id="b">
<div class="sub-parent-a">
<div class="child-a"></div>
</div>
<div class="sub-parent-b">
<div class="child-b"></div>
</div>
</div>

IMO you have way to much jQuery and aren't using any of the power of css.
$(function() {
$(".child").click(function() {
// reset
$('.parents .selected').removeClass('selected');
var $child = $(this);
var $subParent = $(this).closest('.sub-parent');
$child.addClass('selected');
$subParent.addClass('selected');
});
});
div{
padding: 5px;
}
.sub-parent.selected {
background-color: red;
}
.child{
cursor: pointer;
}
.child.selected {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parents">Parents
<div class="parent">- Parent
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
</div>
<div class="parent">- Sub Parent
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
<div class="sub-parent">- - Sub Parent
<div class="child">- - - Child</div>
</div>
</div>
</div>