Add a class to the closest parent class only - javascript

I want to add a class via jQuery to a parent div element with a shared class. I can use .closest to add the class added to the correct div.class but it also adds the class to the rest of the divs with the same target class.
So I only want the class adding to the child button.
$('.trigger').on('click', function() {
$('.myclass').addClass('current');
});
.current {
margin: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">
<div style="background-color:red;">
<div style="padding:10px">
<button class="trigger">
Button
</button>
</div>
</div>
</div>
<div class="myclass">
<div style="background-color:blue;">
<div style="padding:10px">
<button class="trigger">
Button
</button>
</div>
</div>
</div>


You need to use .closest() to selecting parent element has .myclass.
$(".trigger").on("click", function() {
$(this).closest(".myclass").addClass("current");
});
.current { margin: 30px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">
<div style="background-color:red;">
<div style="padding:10px">
<button class="trigger">Button</button>
</div>
</div>
</div>
<div class="myclass">
<div style="background-color:blue;">
<div style="padding:10px">
<button class="trigger">Button</button>
</div>
</div>
</div>


You have to use $(this).closest('.myclass') method for closest parent class.
$('.trigger').on('click', function(){
$(this).closest('.myclass').addClass('current');
});

Related

Get throu each div and change class on Button-click

Heyo,
I cant figure out how to make a Script work like this: I want to have a Button that changes the Class of div's on click. But I don't want to make it change all the div's at the same time. I only want to change the first div on the first click, the second div on the second click and so on and so forth.
I've allredy tryed it but failed. Heres the code:
$('button').click(function() {
// give first $(.div).addClass('active') on first click, second div on second click ...
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

With the .eq method, you can pass the index of the element you want, and the jQuery collection of only that element will be returned. Start with an index of 0, increment it on every button click, and add the class to the appropriate element:
let i = 0;
$('button').click(function() {
$('.div').eq(i).addClass('active');
i++;
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

Here a little one liner that grabs the first element that doesn't has the active class.
$('button').click(function() {
$('.div:not(.active):first').addClass('active');
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

You can find the first element and add the active class on that. Then rotate the class so on.
$('button').click(function() {
var activeElem = $('.outer').find('.inner.active');
if(activeElem.length){
activeElem.removeClass('active');
activeElem.next('.inner').addClass('active');
} else {
$('.outer').find('.inner').first().addClass('active');
}
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="inner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

Increment for each click and apply:
var count = 0;
$('button').click(function() {
$('.inner:eq('+count+')').addClass('active');
count++;
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="inner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>

jQuery button click, get div with class

I'm currently working on a client script in jQuery and I'm trying to make it as generic as possible.
I'm looking for a way to select a div with the class ".targets" from a button click.
My markup looks something like this:
<form>
<!-- Products section -->
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
...
</div>
</div>
</div>
<!-- Resources section, slightly different markup -->
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
...
</div>
</div>
</div>
</form>
My jQuery looks like this:
$("form").on("click", "btn-add", function(e){
var targets = $(this).parent().parent().next();
});
This solution works "somehow", but what if the markup changes?
Is there a way in jQuery to select the closest div with the class ".targets" on button click?
Thanks :)

Use (this).closest(".container").find(".targets");
this will select the closest element with the class container and search for an element in that with the class targets
$("form").on("click", ".btn-add", function(e){
var targets = $(this).closest(".container").find(".targets");
console.log($(targets).text().trim())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Products section -->
<div class="products">
<div class="container">
<div class="form-group">
<div class="col-md-12">
<button type="button" class="btn-add">Add</button>
</div>
</div>
<div class="targets">
target1
</div>
</div>
</div>
<!-- Resources section, slightly different markup -->
<div class="resources">
<div class="container">
<br/>
<div class="form-group">
<button type="button" class="btn-add">Add</button>
</div>
<br/>
<div class="targets">
target2
</div>
</div>
</div>
</form>

If you know they will always be within the .products element, you could do:
$(this).closest('.products').find('.targets');
A helpful guide for jQuery traversing methods: http://api.jquery.com/category/traversing/

Try this:
$(this).closest('.container').find('.targets')

You could use closest() which searches for selector higher up in tree and find() which searches for selector going down the tree
$(this).closest('.container').find('.targets')

How to make a div hide when having same set of classes?

I have two set of div containers with input tags with same classes to both.
only difference is when input box of each clicked the resepctive parent div will add "frame-focus" class. what i want is if input is clicked and frame-focus class is exist, hide the div which has class "panel-set" of which the focus class exist.
Please check my div containers below. please advice how to proceed this
Ex:
<!--- here is 1st div container which input box is selected-->
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set"></div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set"></div>
</div>
</div>

Use the child selector or the direct child selector to hide the .panel-set which is a child of .frame-focus:
.frame-focus > .panel-set {
display: none;
}
<!--- here is 1st div container which input box is selected-->
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set">1</div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set">2</div>
</div>
</div>

html
<div class="block">
<div class="frame frame-focus">
<input name="set1">
<div class="panel-set">1</div>
</div>
</div>
<!-- here is 2nd div -->
<div class="block">
<div class="frame">
<input name="set1">
<div class="panel-set">2</div>
</div>
</div>
jquery
$(document).ready(function(){
$("input").click(function() {
$(this).siblings('.panel-set').hide();
});
});
Example jsfiddle

How to hide a parent div if an inner div has a certain class, with javascript

Ok so say I have many divs. Some of the divs, the children have one class, other divs the children have a different class.
I want to hide only the divs which have a child with a certain class.
For example,
<div class="mainDiv">
<div class="kulkul">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childB">
</div>
</div>
</div>
<div class="mainDiv">
<div class="kulkul">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="kulkul">
<div class="childB">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childA">
</div>
</div>
</div>
Now above, let's say that I only want to hide the parent divs which have a child div with the class .childB
This can't be done with CSS as far as I know (CSS3 anyway), because CSS doesn't allow you to style the parent div, only a child div. And the parent .mainDiv divs (the ones I want to hide) are all exactly the same.
So that leaves javascript.
Using the example above, how can I hide all the .mainDiv divs which contain a child div with the class .childB?

HIDING PARENT ELEMENT based on its direct descendant
//Update the **sample-element-to-hide** with whatever you wanted to use as a child class with the parent element you wanted to hide e.g., 'childB'
var elementToHideList = document.getElementsByClassName("sample-element-to-hide");
for (var i = elementToHideList.length; i--;)
elementToHideList[i].parentNode.style.display = "none";
HIDING PARENT ELEMENT based on its child element.
//Solution for the OP
//Update the **childB** with whatever you wanted to use as a child class with the parent element you wanted to hide.
//Note that this would only works if the parent element has a **className** mainDiv. You can change mainDiv with your own parent className.
$('.classB').closest('.mainDiv').hide();

You can do this with pure javascript:
var elementsChildB = document.getElementsByClassName("childB")
for(var i = 0 ; i < elementsChildB.length ; i++){
elementsChildB[i].parentNode.style.display = "none" ;
}
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
Or with Jquery:
$(".childB").parent().hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>
<div class="mainDiv">
<div class="childB">
b
</div>
</div>
<div class="mainDiv">
<div class="childA">
a
</div>
</div>

Javascript Method
var childB = document.getElementsByClassName("childB");
for(var e = 0; e <= childB.length; e++){
childB[e].parentNode.style.display = "none";
}
JQuery Method
$('.childB').parent().hide();

Using jQuery you could use the following selector. This will hide all mainDiv containing childB but not mainDiv that contain other elements or childB without a mainDiv as its parent (in whichever level , by the use of closest - https://api.jquery.com/closest/ ) :
$(".childB").closest(".mainDiv").hide();
Fiddle:
$(function() {
$(".childB").closest(".mainDiv").hide();
});
.childB {
background-color: red;
border: 1px solid black;
height: 50px;
margin-left:20px;
}
.childA {
background-color: green;
border: 1px solid black;
height: 50px;
margin-left:10px;
}
.mainDiv {
background-color: yellow;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDiv">
<div class="childA">
</div>
</div>
<div class="mainDiv">
<div class="childA">
</div>
</div>
<div class="mainDiv">
<div class="childB">
</div>
</div>
<div class="mainDiv">
PARENT
<div class="childA">Don't hide
</div>
</div>
<div class="mainDiv">
PARENT
<div class="childB">To be hidden
</div>
</div>
<div class="mainDiv">
This contains a child A which contains a child B: <br />
<div class="childA">It is a child A
<div class="childB">To be hidden
</div>
</div>
</div>
<div class="mainDiv">
<div class="childA">
</div>
</div>
<div class="childB">Should not be hidden
</div>

Well, you can use .parent() method to select the parent node of specified child nodes, and use .hide() to hide the selected parent nodes.
$('.childB').each(function() {
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>
<div class="mainDiv">
<div class="childB">
B
</div>
</div>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>
<div class="mainDiv">
<div class="childB">
B
</div>
</div>
<div class="mainDiv">
<div class="childA">
A
</div>
</div>

Using jQuery, $('.childA').parent().hide();

Grab all div of mainDiv class and loop for each can check children class has specific class !!
var main = document.getElementsByClassName("mainDiv");
for(var i = 0; i < main.length ; i++){
if(main[i].children[0].classList[0] == "childB"){ //assure only has one children
main[i].style.display = "none";
}
}

jquery on click appear another element in html

for example I have this html code:
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
I made settings class to display nothing in css, unless I click on one of 4 p elements in product class. After click the settings class appears at the bottom as it should be.
How should I make that if I click for example Name2 then settings class appears after Name2 and not at the bottom?

Use $(this) to target the element you clicked on, combined with insertAfter() to add the content to this element.
Run the code snippet below and click on any of the elements with the classname product to see how this works.
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1
<p>
</div>
<div class="product">
<p>Name2
<p>
</div>
<div class="product">
<p>Name3
<p>
</div>
<div class="product">
<p>Name4
<p>
</div>
<div class="settings">
<p>SETTINGS
<p>
</div>

You can use .insertAfter() :
$(function(){
$('.product p').click(function(){
$('.settings').insertAfter($(this).closest('.product '))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>

You can do it like,
$(".product > p").click(function(){
var $parent = $(this).parent(".product");
$parent.siblings(".settings").insertAfter($parent);
});
by using .insertAfter()
DEMO

Categories

Resources