We Keep Coding

How to use each function jQuery to addClass on it's parent element

just asking can you please tell me how can I achieve it when I clicked the button it should only add the class on its parent div. Currently its adding both the parent div even I click the first button
$( ".main-btn" ).each(function(index) {
$(this).on("click", function(){
$(".main").addClass("addClass")
});
});
.main {
background: yellow;
margin-bottom: 3px;
height: 50px;
}
.main.addClass {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="main-btn">Button</div>
</div>
<div class="main">
<div class="main-btn">Button</div>
</div>

There's no need for .each() here, you can just reference the parent from the clicked element via .closest()...
$(".main-btn").on("click", function() {
$(this).closest(".main").addClass("addClass");
});
.main {
background: yellow;
margin-bottom: 3px;
height: 50px;
}
.main.addClass {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div class="main">
<div class="main-btn">Button</div>
</div>
<div class="main">
<div class="main-btn">Button</div>
</div>
Also, you might not need jQuery
document.querySelectorAll(".main .main-btn").forEach((btn) => {
btn.addEventListener("click", (e) => {
e.target.closest(".main").classList.add("addClass");
});
});

You can use the parent() method:
$(".main-btn").on("click", function() {
$(this).parent().addClass("addClass");
});
.main {
background: yellow;
margin-bottom: 3px;
height: 50px;
}
.main.addClass {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="main-btn">Button</div>
</div>
<div class="main">
<div class="main-btn">Button</div>
</div>

Mouseover on document for find a classes

I have a code like this, with 2 different divs:
function mouseoverCheck(text) {
$(document).on('mousemove', function(e) {
$('#tooltip').show().html(text)
$('#tooltip').css({
left: e.pageX,
top: e.pageY
}).show();
});
}
function hover() {
$(document).on('mouseover', function(event) {
var $target = $(event.target);
if ($target.closest(".container1").length) {
mouseoverCheck('Container1 found!')
event.stopPropagation();
} else {
mouseoverCheck('None')
event.stopPropagation();
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tooltip" style="position:absolute; display: none; background: yellow;"></div>
<div class="container1">
<div class='container2' style="height:200px; width: 100%; border: 3px solid red">
<div class="container3" style="height:100px; width: 100%">
<h1 style="font-size: 40px; text-align:center">CONTAINER HOVER</h1>
</div>
</div>
</div>
<div class="container4">
<div class='container5' style="height:200px; width: 100%; border: 3px solid red">
<h1 style="font-size: 40px; text-align:center">NONE</h1>
</div>
</div>
I need to show mi tooltip with text if i pass the mouse over my div , but when i pass over my .container1, it doesn't works good, because it show me 'Container1 found!', alternate by 'None'.
Have you got any other solution?
Thank you!

Try this code .. Is this what you want??
$('.tooltip_show').on('mousemove' , function(e) {
$('#tooltip').html($(this).find('h1').text());
$('#tooltip').css({
left: e.pageX,
top: e.pageY
}).show();
});
$('div :not(.tooltip_show)').on('mouseover' , function(e) {
$('#tooltip').hide().html('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tooltip" style="position:absolute; display: none; background: yellow;"></div>
<div class="tooltip_show container1">
<div class='container2' style="height:200px; width: 100%; border: 3px solid red">
<div class="container3" style="height:100px; width: 100%">
<h1 style="font-size: 40px; text-align:center">CONTAINER HOVER</h1>
</div>
</div>
</div>
<div class="container4">
<div class='container5' style="height:200px; width: 100%; border: 3px solid red">
<h1 style="font-size: 40px; text-align:center">NONE</h1>
</div>
</div>
Add tooltip_show class to the container you want to show tooltip

Multiple div's onhover same functionality

Here I have six different div on hover blue color div should appear and by default hidden. I have written code for this but it works only for the first div I merge all div's in a single variable. Can anyone suggest to me what I'm missing here
var tcpTooltip = $('.tp-cont-tech, tp-cont-b, tp-cont-m, tp-cont-t, tp-cont-i, tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, tpc-tooltip-b, tpc-tooltip-m, tpc-tooltip-t, tpc-tooltip-i, tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
$(tcpTooltip).hover(function() {
$(tcpTooltipDiv).show();
}, function() {
$(tcpTooltipDiv).hide();
});
});
/* Tooltip */
.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont-tech">
<div class="tpc-tooltip-tech"></div>
</div>
<div class="tp-cont-b">
<div class="tpc-tooltip-b"></div>
</div>
<div class="tp-cont-m">
<div class="tpc-tooltip-m"></div>
</div>
<div class="tp-cont-t">
<div class="tpc-tooltip-t"></div>
</div>
<div class="tp-cont-e">
<div class="tpc-tooltip-e"></div>
</div>
</div>

As suggested already, I'd go by using pure CSS and the :hover pseudo.
If you really want jQuery for some reason this would be a remake of your code.
Basically (beside adding common classes to your elements [see code below]) you need the $(this) reference of the currently hovered element:
var $tpCont = $('.tp-cont');
var $tcpTooltip = $('.tcp-tooltip');
$tcpTooltip.hide();
$tpCont.hover(function() {
$(this).find($tcpTooltip).toggle();
});
.tp-cont {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tcp-tooltip {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont tp-cont-tech">
<div class="tcp-tooltip tpc-tooltip-tech"></div>
</div>
<div class="tp-cont tp-cont-b">
<div class="tcp-tooltip tpc-tooltip-b"></div>
</div>
<div class="tp-cont tp-cont-m">
<div class="tcp-tooltip tpc-tooltip-m"></div>
</div>
<div class="tp-cont tp-cont-t">
<div class="tcp-tooltip tpc-tooltip-t"></div>
</div>
<div class="tp-cont tp-cont-e">
<div class="tcp-tooltip tpc-tooltip-e"></div>
</div>
</div>

You can achieve this far more effectively with CSS. If you add some common classes to the tp-cont-X and tpc-tooltip-X elements, then you can use the :hover pseudo-selector, like this:
.tp-cont {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
display: none;
}
.tp-cont:hover .tpc-tooltip {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont tp-cont-tech">
<div class="tpc-tooltip tpc-tooltip-tech"></div>
</div>
<div class="tp-cont tp-cont-b">
<div class="tpc-tooltip tpc-tooltip-b"></div>
</div>
<div class="tp-cont tp-cont-m">
<div class="tpc-tooltip tpc-tooltip-m"></div>
</div>
<div class="tp-cont tp-cont-t">
<div class="tpc-tooltip tpc-tooltip-t"></div>
</div>
<div class="tp-cont tp-cont-e">
<div class="tpc-tooltip tpc-tooltip-e"></div>
</div>
</div>

Try using index inside hover.
var tcpTooltip = $('.tp-cont-tech, .tp-cont-b, .tp-cont-m, .tp-cont-t, .tp-cont-i, .tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, .tpc-tooltip-b, .tpc-tooltip-m, .tpc-tooltip-t, .tpc-tooltip-i, .tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
$(tcpTooltip).hover(function(index, item) {
$(tcpTooltipDiv).eq($(this).index()).show();
}, function() {
$(tcpTooltipDiv).hide();
});
});
/* Tooltip */
.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont-tech">
<div class="tpc-tooltip-tech"></div>
</div>
<div class="tp-cont-b">
<div class="tpc-tooltip-b"></div>
</div>
<div class="tp-cont-m">
<div class="tpc-tooltip-m"></div>
</div>
<div class="tp-cont-t">
<div class="tpc-tooltip-t"></div>
</div>
<div class="tp-cont-e">
<div class="tpc-tooltip-e"></div>
</div>
</div>

jquery keep hover state

I have an hidden element which contains a list. What I want to achieve is, to keep the hover state while moving from the clicked div with the cursor to the element with the list. The element which contains the list, should first disappear as soon as I go away from it e.g point away with the cursor. How can I achieve that?
I have this markup:
$('.hover').hover(function() {
$('.hoverDiv').addClass('show')
}, function() {
$('.hoverDiv').removeClass('show')
})
.container {
position: relative;
width: 100%;
height: 100%;
}
.hoverDiv {
display: none;
border: 1px solid red;
}
.hoverDiv.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hover">
<p>
hover this div
</p>
</div>
<div class="hoverDiv">
show me when hovered
</div>
</div>
Here is the JSFIDDLE

You should bind the hover event to the .container instead of the .hover div. because when the user will move out from .hover, the list will be hide. But when user move on the .hoverDiv he still on the .container
$('.container').hover(function() {
$('.hoverDiv').addClass('show')
}, function() {
$('.hoverDiv').removeClass('show')
})
.container {
position: relative;
width: 100%;
height: 100%;
}
.hoverDiv {
display: none;
border: 1px solid red;
}
.hoverDiv.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hover">
<p>
hover this div
</p>
<div class="hoverDiv">
show me when hovered
</div>
</div>
</div>
By the way, should don't need a script for this. You can do this using css only. Like this:
.container {
position: relative;
width: 100%;
height: 100%;
}
.hoverDiv {
display: none;
border: 1px solid red;
}
.container:hover .hoverDiv {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hover">
<p>
hover this div
</p>
<div class="hoverDiv">
show me when hovered
</div>
</div>
</div>

Try this jquery code:
$('.hover').hover(function(){
$('.hoverDiv').addClass('show')
})
$('.hoverDiv').mouseleave(function(){
$('.hoverDiv').removeClass('show')
});
$('.hover').hover(function(){
$('.hoverDiv').addClass('show')
})
$('.hoverDiv').mouseleave(function(){
$('.hoverDiv').removeClass('show')
});
.container {
position: relative;
width: 100%;
height: 100%;
}
.hoverDiv {
display: none;
border: 1px solid red;
}
.hoverDiv.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hover">
<p>
hover this div
</p>
</div>
<div class="hoverDiv">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>

DIV's reorder by themselves upon expand - how do I keep the same order?

I've got a grid of items that upon click expand to show a table below it. It works fine, but it reorders the DIV's positions as per my illustration below.
I need them to keep their respective position in their "columns".
Here's the illustration to make it clear:
And here is my HTML code:
<div
class="item-component"
ng-controller="CollapseCtrl"
ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
>
<div class="component-wrapper" ng-click="isCollapsed = !isCollapsed">
Item - click to expand
</div>
<div class="codes-wrapper" collapse="isCollapsed">
<table class="table table-striped table-condensed">
Expanded content here
</table>
</div>
</div>
And here is the .item-component class:
.item-component {
width: 33.33333333333333%;
float: left;
padding-left: 15px;
}
How would I achieve the "expected result" in my illustration?

Use display:inline-block instead of float:left on your .item-component
Living Demo
.item-component {
width: 33.33333333333333%;
display: inline-block;
padding-left: 15px;
}
Or, you can take a look at BootStrap and do it by using the :before element maintaning the float:left as you had it before.
You would also need to wrap each row:
.col{
float:left;
width: 32.33%;
min-height: 50px;
background: #ccc;
padding: 20px;
box-sizing: border-box;
}
.row{
display:block;
}
/* This do the trick */
.row:before{
content: " ";
display: table;
box-sizing: border-box;
clear: both;
}
Living example
Update
If you don't want the gap you will have to look for another HTML markup. You will have to print first each column with each rows.
This is the needed html markup:
<div class="col">
<div class="row" id="demo">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="col">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="col">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
And the needed css:
.col{
float:left;
width: 32.33%;
}
.row{
display:block;
padding: 20px;
box-sizing: border-box;
background: #ccc;
min-height: 50px;
}
#demo{
height: 150px;
background: red;
}
Living demo

You can do it in the following way.
HTML:
<div class="container">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<br class="clear" />
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<br class="clear" />
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div>
CSS:
.col {
float: left;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
JS:
$('.col').click(function() {
if ($(this).is('.clicked')) {
$(this).removeClass('clicked');
} else {
$(this).addClass('clicked')
}
});
Live demo: http://jsfiddle.net/S7r3D/1/
ETA: the problem with this solution is that it moves entire row down. I don't really see how to nicely achieve what you want...You could try to overflow the other divs, but it depends on your needs. Is such solution acceptable?
ETA2: actually I made it perfect I think! Have a look here: http://jsfiddle.net/S7r3D/3/
The crucial change was rearranging divs and putting them in columns instead.
HTML:
<div class="container">
<div class="fleft">
<div class="col">1</div>
<div class="col">4</div>
<div class="col">7</div>
</div>
<div class="fleft">
<div class="col">2</div>
<div class="col">5</div>
<div class="col">8</div>
</div>
<div class="fleft">
<div class="col">3</div>
<div class="col">6</div>
<div class="col">9</div>
</div>
<div>
CSS:
.col {
clear: both;
width: 100px;
min-height: 100px;
background: #ccc;
padding: 20px;
margin: 10px;
cursor: pointer;
}
.col:hover {
background: yellow;
}
.col.clicked {
height: 300px;
background-color: red;
}
.fleft
{
float: left;
}
JS: /* same as above */

Create three container divs, and afterwards, put {1, 4, 7} into div1, {2, 5, 8} into div2, and {3, 6, 9} into div3.
Otherwise you will have it very difficult to control their positioning.