We Keep Coding

JavaScript loop over clickable elements on click event, and skip the specific clicked element

<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>
Upon clicking one of the 'clickable' elements i want to add a new class to all elements with 'clickable' class except the one that has been clicked.
$('.clickable').on('click', function (e) {
$('.clickable').each(function () {
$(this).addClass('new-class')
});
})
How, inside the loop, can i skip the specific element that was clicked?

$('.clickable').on('click', function() {
$(this).removeClass('new-class').siblings().addClass('new-class');
});

This is the simplest to control and read
You do not need the each
$('.clickable').on('click', function(e) {
$('.clickable').addClass('new-class');
$(this).removeClass('new-class');
})
.new-class {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>
If they are surely all in the same container, you can use siblings.
To chain you MUST remove before adding
$('.clickable').on('click', function(e) {
$(this)
.removeClass('new-class') // still necessary for the second click of another element
.siblings().addClass('new-class');
})
.new-class {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>

There is a not method in jQuery so the simplest thing you can do in my opinion is with the help of not method like below:
$('.clickable').on('click', function (e) {
$('.clickable').not(this).addClass('new-class');
})

how to set the index of an element

$('.title').on('click', function(){
console.log($(this).index('.title'));
});
.title{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>lorema</div>
<div class='title'>loremb</div>
<div class='title'>loremc</div>
<div class='title'>loremd</div>
Now, how to SET the index of a clicked element, i.e. change its position?
Is it possible something like:
$('.clicked').setIndex('.title', 3);

One option would be to .remove() the clicked element, then find the third .title element currently in the DOM, and use insertAfter to insert the clicked element after it:
$(document).on('click', '.title', function(){
const $this = $(this);
$this.remove();
$this.insertAfter($('.title').eq(2));
});
.title{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>lorema</div>
<div class='title'>loremb</div>
<div class='title'>loremc</div>
<div class='title'>loremd</div>
Note the event delegation there - that's needed because otherwise, the listener will only work once for each .title.
To illustrate why .remove is necessary, check the following snippet - although it's using insertAfter($('.title').eq(2));, the .eq(2) refers to the 3rd element before the clicked one is removed, resulting in inconsistent behavior; if you click the first, second, or third element, it'll get put in the third position, instead of the fourth, as desired.
$(document).on('click', '.title', function(){
const $this = $(this);
$this.insertAfter($('.title').eq(2));
});
.title{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='title'>lorema</div>
<div class='title'>loremb</div>
<div class='title'>loremc</div>
<div class='title'>loremd</div>
<div class='title'>loreme</div>
<div class='title'>loremf</div>

On click add class to child element without Jquery

I have a task where Jquery is not working, so I need a workaround to perform an add class event to child element of a div upon click event.
How do I go about that.
The Jquery for that purpose would be
$('.wpb_vc_column').click(function(e) {
alert();
e.preventDefault();
$(this).find('.vc_controls').addClass('show-controls');
});
.show-controls {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpb_vc_column">
<div class="vc_controls">SomeThing</div>
</div>
Its basically a wordpress backend thing which need to be workable on mobile devices.
Regards

You can use querySelectorAll() to select all the elements with class wpb_vc_column and associate the click event to each element. Then click on these element will find the child elements with class vc_controls and add the class to it.
function clickedColumn(e){
e.preventDefault();
if(this.querySelector('.vc_controls')){
this.classList.add('show-controls');
}
}
document.querySelectorAll('.wpb_vc_column').forEach(function(el){
el.addEventListener('click', clickedColumn);
});
.show-controls{
color:red;
}
<div class="wpb_vc_column">
<div class="vc_controls">SomeThing 1</div>
<div class="vc_controls">SomeThing 2</div>
</div>

var myEle = document.getElementsByClassName('vc_controls');
myEle.className = "show-controls";

make use of querySelector method and and search for child in parent element
el.querySelector("#child").className = 'show-controls';
or
el.querySelector('.vc_controls').className = 'show-controls';

function changeClass(element){
var get_vc_controls=element.getElementsByClassName('vc_controls');
get_vc_controls[0].className='show-controls';
}
.show-controls {
color: red
}
<div class="wpb_vc_column" style="border:1px solid;" onclick="changeClass(this)">
<div class="vc_controls">SomeThing</div>
</div>

Testing if a click is in a div and all its children

I am facing an issue about this.
<div id="1">
<div id="2">
</div>
<div id="3">
<div id="4">
</div>
</div>
</div>
<div id="others_div">
</div>
I want to add the class "hidden" to "1" when I click on something which is not "1" nor one of its children.
Now I am using this but I have a lack of imagination for solving this issue...
document.onclick = function(e)
{
if(e.target.id!="1")
{
$("#1").addClass("hidden");
}
}

Well, to avoid e.stopPropagation() (maybe you want that event to bubble up to some other ancestor) You can check if it is not clicked on #1 nor on it's children like this:
$('body').on('click', function(e) {
if (!((e.target.id== "1") || $(e.target).closest('#1').length)) {
$("#1").addClass("hidden");
}
});

You could use a jQuery check like the following one to check if the current element is your 1 element or traverse the DOM to see if the current target is contained within an element with an ID of 1 :
<script>
$(function(){
// Trigger this when something is clicked
$(document).click(function(e){
// Toggle the hidden class based on if the current element is 1
// or if it is contained in an element with ID of 1
$("#1").toggleClass('hidden',!((e.target.id== "1") || $(e.target).closest('#1').length))
});
});
</script>
Generally, you should avoid using ID attributes that only consists of numbers as they are not valid (ID attributes must begin with a letter). Ignoring this could result in some issues with regards to CSS or jQuery selection.

JQuery
$('body').on( "click", function(e) {
if(e.target.id !== "1")
{
$("#1").addClass("hidden");
}
});

I think you want this
// taken from http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element
$('html').click(function() {
//Hide the menus if visible
alert('hide');
});
$('#one').click(function(event){
event.stopPropagation();
});
div#one {
background: yellow;
}
div#others_div {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="one">
div one
<div id="2">
div two
</div>
<div id="3">
div three
<div id="4">
div four
</div>
</div>
</div>
<div id="others_div">
other div
</div>

How can I hide my div using jQuery, and then showing it again by pressing a different div?

What I want to do is:
Make my div hidden when the page loads, and then when you click a different div it will show. My limited knowledge doesn't really allow me to make this happen. What am I doing wrong?
jQuery:
$(document).ready(function(){
$('#trojkat2').click(function(){
$('#login').hide();
});
});
</script>
"trojkat2" is the div I want to click to make "login" appear.
HTML:
<div class="kwadrat2">
<div class="trojkat2">
<div class="trojkat_bg2"></div>
</div>
</div>
<div class="login">
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg">
</div>
What have I done wrong?

First, hide your #login div when document ready by .hide() function, after click $(.trojkat2), use show() to make #login appear, by the way class selector is . instead of #
$(document).ready(function(){
$('.login').hide();
$('.trojkat2').click(function(){
$('.login').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kwadrat2">
<div class="trojkat2">click here
<div class="trojkat_bg2"></div>
</div>
</div>
<div class="login">
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg">
</div>

Try this:
$('.trojkat2').click(function() {
$('.login').show();
});

Your example doesn't have an element with id = trojkat2 so your selector $("#trojkat2") won't work. Same is for #login. Instead you need to change it to a class selector :
$('.trojkat2').click(function(){
$('.login').hide();
});
Example : http://jsfiddle.net/DinoMyte/nrNX8/529/

In your HTML code, you created classes called login and trojkat2. However, in your jQuery, you are telling it to call the IDs called login and trojkat2. Classes are preceded with a "." and IDs are preceded with a "#". Instead, try the following code in your jQuery:
$(document).ready(function(){
$('.trojkat2').click(function(){
$('.login').hide();
});
});