We Keep Coding

removing class from element when the class goes to another one in javascript

first sorry if you don't understand the title
I have a list that contains elements
once I click on an item, "s" class must be added to it and removed from others
I try to remove by loop but didn't work
function selectIt(x) {
x.classList.add('s');
var items = document.querySelectorAll('item');
for (i = 0; i < items.length; i++) {
items[i].classList.remove('s');
}
}
.s {
background: red;
}
<div class="list">
<div class="item" onclick="selectIt(this)">item 1</div>
<div class="item s" onclick="selectIt(this)">item 2</div>
<div class="item" onclick="selectIt(this)">item 3</div>
<div class="item" onclick="selectIt(this)">item 4</div>
<div class="item" onclick="selectIt(this)">item 5</div>
</div>

You are not defining the type of selector in querySelectorAll like you want to search for a class or id.
Add the s class at the end and not in the beginning, as defining it in the start will remove the s class from the current element also.
Also, you can search for s class in the querySelector instead of searching for item.
function selectIt(x) {
var items = document.querySelectorAll('.s');
for (i = 0; i < items.length; i++) {
items[i].classList.remove('s');
}
x.classList.add('s');
}
.s {
background: red;
}
<div class="list">
<div class="item" onclick="selectIt(this)">item 1</div>
<div class="item s" onclick="selectIt(this)">item 2</div>
<div class="item" onclick="selectIt(this)">item 3</div>
<div class="item" onclick="selectIt(this)">item 4</div>
<div class="item" onclick="selectIt(this)">item 5</div>
</div>

You don't have to run a loop at all. First, remove the class s from the previous div element and add it to the new div element which is clicked.
function selectIt(x) {
let item = document.querySelector('.s');
item.classList.remove('s')
x.classList.add('s');
}
.s {
background: red;
}
<div class="list">
<div class="item" onclick="selectIt(this)">item 1</div>
<div class="item s" onclick="selectIt(this)">item 2</div>
<div class="item" onclick="selectIt(this)">item 3</div>
<div class="item" onclick="selectIt(this)">item 4</div>
<div class="item" onclick="selectIt(this)">item 5</div>
</div>

You can do this like this
function selectIt(x) {
var elements = document.getElementsByClassName('item');
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = 'white';
}
x.style.backgroundColor = "red"
}
<div class="list">
<div class="item" onclick="selectIt(this)">item 1</div>
<div class="item" onclick="selectIt(this)">item 2</div>
<div class="item" onclick="selectIt(this)">item 3</div>
<div class="item" onclick="selectIt(this)">item 4</div>
<div class="item" onclick="selectIt(this)">item 5</div>
</div>
Basically first i have made background color of class item = white
then i have made background of "this" red

Show and Hide Div With Matching Class Name On Click

I am still getting to grips with jQuery and wondered if anyone had a suggestion for this?
Basically on click I want to show the div with the matching class, so if you click the btn with class '.project1' then it should show the content div with the same class of '.project1'.
I'm just stuck on how it would find this so any suggestions would be awesome :)
Thanks in advance.
Snippet:
$('div[class*="project"]').click(function (e) {
$(this).closest('.content').show();
});
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>
<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>
CodePen: https://codepen.io/nickelse/pen/mYrOdz?editors=1111

One option is to use data() to store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
$('div[class*="project"]').click(function (e) {
var project = $(this).data("project"); //Get the data-project of the clicked element
$(".content.project" + project).toggle(); //Toggle the element with content and project class
});
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn" data-project="1">BTN 1</div> <!-- Add data-project on HTML-->
<div class="project2 btn" data-project="2">BTN 2</div>
<div class="project3 btn" data-project="3">BTN 3</div>
<div class="project4 btn" data-project="4">BTN 4</div>
<div class="project1 content" data-project="1">CONTENT 1</div>
<div class="project2 content" data-project="2">CONTENT 2</div>
<div class="project3 content" data-project="3">CONTENT 3</div>
<div class="project4 content" data-project="4">CONTENT 4</div>

You need to find the project number you clicked on.
You can do that by filtering the classes of the button you clicked on and extracting the number :
+[...this.classList].find(c => c.startsWith('project')).replace('project', '');
Then all you have to do is toggle the targeted project content :
$('.content.project'+project).toggle();
Here's a working example:
$('div[class^="project"]').on('click', function(){
const project = +[...this.classList].find(c => c.startsWith('project')).replace('project', '');
$('.content.project'+project).toggle();
});
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>
<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>

Toggling based on class matching is one of the harder thing to do in JQuery, however to achieve what you require you could do the following:
/* When a btn is clicked */
$('.btn').click(function(e) {
/* Extract the classes of this button element */
const classes = $(this).attr('class');
/* Parse the project class part of the classes string */
const projectClass = classes.match(/project\d+/)[0];
/* Construct a matcher for the projects corresponding
content and "toggle" the content's visiblity */
$('.content.' + projectClass).toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>
<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>

You can try to use regex to the class started with "project" and then show or hide it
$('.btn').click(function (e) {
var classArray = $(this).attr("class"),
re = /^project[0-9]+/ ,
className = re.exec(classArray)[0];
$('.content.'+ className).toggle();
});
$('.btn').click(function (e) {
var classArray = $(this).attr("class"),
re = /^project[0-9]+/ ,
className = re.exec(classArray)[0];
$('.content.'+ className).toggle();
});
.content {
display: none
}
.btn {
cursor:pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project1 btn">BTN 1</div>
<div class="project2 btn">BTN 2</div>
<div class="project3 btn">BTN 3</div>
<div class="project4 btn">BTN 4</div>
<div class="project1 content">CONTENT 1</div>
<div class="project2 content">CONTENT 2</div>
<div class="project3 content">CONTENT 3</div>
<div class="project4 content">CONTENT 4</div>

How toggle multiple element with one .toggle()

I know this question is kind of weird but i am not able to find out this
For Example : there is some div with ids
HTML
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
<div id="test4">test 4</div>
<div id="test5">test 5</div>
<div id="test6">test 6</div>
and i want to toggle some specific div
like
test1, test4 and test6
so i have to do like this
$('#test1').toggle();
$('#test4').toggle();
$('#test6').toggle();
but i want to know is there any way to do that like
$('#test1', '#test4', '#test6').toggle();
I know it can be done if i just give same class on the div which i want to toggle.
but i want to know this for that reason i asked

Sure you can, simply comma separate your ID selector:
$('#test1, #test4, #test6').toggle();
$("#toggle").on("click", function(){
$('#test1, #test4, #test6').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE 1, 4, 6</button>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
<div id="test4">test 4</div>
<div id="test5">test 5</div>
<div id="test6">test 6</div>
A much reusable code would allow you to toggle any desired elements without copy/pasting your JavaScript functions.
Here's an example where the desired selector to toggle is stored within the data-toggle attribute of the action element:
$("[data-toggle]").on("click", function(){
$(this.dataset.toggle).toggle();
});
.hidden{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-toggle="#test1,#test6">Toggle 1, 6</button>
<button data-toggle="#test3,#test4">Toggle 3, 4</button>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
<div id="test4">test 4</div>
<div id="test5">test 5</div>
<div id="test6">test 6</div>
<button data-toggle=".info">Toggle .info</button>
This is some
<span class="info">OLD</span>
<span class="info hidden">NEW!!!</span>
info

Select and wrap two divs with jquery

I am trying to wrap divs in a 'row' wrapper, so that there are two divs in each.
My code looks like this:
<div id="content" class="center cutepicscontainer cf">
<div class="product cf">product 1</div>
<div class="product cf">product 2</div>
<div class="product cf">product 3</div>
<div class="product cf">product 4</div>
</div>
And I would like my products to be sorted like this:
<div id="content" class="center cutepicscontainer cf">
<div class="row">
<div class="product cf">product 1</div>
<div class="product cf">product 2</div>
</div>
<div class="row">
<div class="product cf">product 3</div>
<div class="product cf">product 4</div>
</div>
</div>
I searched and found a piece of jquery code, but this doesn't work exactly like I want.
$('.cutepicscontainer .product').each(function(){
$(this).next().andSelf().wrapAll('<div class="row"/>');
});
This is the outcome : http://i.imgur.com/Jx0r3NO.png
Thanks in advance!
Victor
EDIT added .product:even, now it works!

$('.cutepicscontainer .product:even').each(function(){
$(this).next().andSelf().wrapAll('<div class="row cf"/>');
});
This works!

jQuery Rearrange HTML Inside Div

I have HTML like this -
<div class="outerDiv" id="od_1">
<label>Div 1</label>
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
<div class="outerDiv" id="od_2">
<label>Div 2</label>
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
What I want to achieve through jQuery is this -
<div class="outerDiv" id="od_1">
<label>Div 1</label>
<div class="innerDivBox">
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
</div>
<div class="outerDiv" id="od_2">
<label>Div 2</label>
<div class="innerDivBox">
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
</div>
I started with looping through div with class "outerDiv" -
$('.outerDiv').each(function(i, obj) {
var divId = this.id;
});
But I am not sure how exactly I should proceed from here. Any help would be appreciated. Thanks.

You could use find() and wrapAll() to group the inner divs with a common parent:
$('.outerDiv').each(function(i, obj) {
$(this).find('.innerDiv').wrapAll('<div class="innerDivBox">');
});
jsFiddle here.

Try this:
$('.outerDiv').each(function() {
$(this).append( $('<div class="innerDivBox"></div>').append( $(this).find('.innerDiv') ) );
});