Get throu each div and change class on Button-click

Get throu each div and change class on Button-click - javascript

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>

Related

Fill divs with content from hidden directory

I have a hidden directory (.directory) with several divs (.content) and different content in it.
Now on pageload, I want to randomly pick a div (.content) from the directory and place it in the lower, visible divs (.box).
The hidden directory has more divs (.content) than should be shown at the end in the visible divs (.box). For example, I have 20 hidden content divs, but just randomly 3 should be shown.
So my solution would be, that JS counts on pageload, how much divs named ".box" and then randomly pick the counted amount of divs named ".content" from the directory and place in the divs named ".box". Would that be the right way?
But I really have no idea, how to do that :D
I have prepared a fiddle: https://jsfiddle.net/m5sqwrpg/4/
Here is the HTML
<div class="directory">
<div class="content">
<div class="headline">Headline A</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline B</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline C</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline D</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline E</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline F</div>
<div class="text">Some kind of Content</div>
</div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
And the CSS:
.directory {
display: none;
}
.content {
margin-bottom: 20px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
Thank you so much!

Here is something that should get you started:
$(document).ready(function(){
$(".box").each(function(){
var contentDivs = $(".directory .content");
var contentToPick = Math.floor(Math.random()*(contentDivs.length));
$(contentDivs[contentToPick]).appendTo($(this));
});
});
.directory {
display: none;
}
.content {
margin-bottom: 20px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.0.min.js"></script>
<div class="directory">
<div class="content">
<div class="headline">Headline A</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline B</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline C</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline D</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline E</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline F</div>
<div class="text">Some kind of Content</div>
</div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
I don't guarantee it will work the way you envision, so it will be good to give it a proper test.
It should basically pull a random div from the ".directory" div for each ".box".
It relies on the fact, that when we select a div from ".directory" we actually remove it from ".directory" to put it in ".box" so even if the random function returns the same index, on the second pass, the div there will be different.

EDIT : #Pavel Donchev solution is better :)
It's better for you to change the CSS style of your elements to display them, or not.
To choose a define number of random elements, you can do it like this :
function randomContent(numberOfElements){
var i = 0;
var randomElements = $(".content").get().sort(function() {
return Math.round(Math.random()) - 0.5;
}).slice(0, numberOfElements);
while(i < randomElements.length) {
if($(randomElements[i]).hasClass('show')){
break;
}
else{
$(randomElements[i]).addClass('show');
i++;
}
}
}
randomContent(3);
.content {
display: none;
margin-bottom: 20px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
.show{
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directory">
<div class="content">
<div class="headline">Headline A</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline B</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline C</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline D</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline E</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline F</div>
<div class="text">Some kind of Content</div>
</div>
</div>
Working JSFiddle : https://jsfiddle.net/2m9tdgn2/

Hi as per undersanding below code will solve your problem easily just put that code under script tag. also include jquery.min.js in your html. to avoide $ is undefined :)
$(document).ready(function(){
drawRandomDivContent();
});
function drawRandomDivContent()
{
var container=$(".content");
var array=[];
var dataarray=[]
for(var i=0;i<container.length;i++)
{
var number=getRandomInt(container.length);
if($.inArray(number,array)==-1)
{
var selectedDiv=container[number];
dataarray.push(selectedDiv);
array.push(number);
if(array.length==3)
break;
}
}
var destinationdiv=$(".box");
for(var i=0;i<dataarray.length;i++)
destinationdiv[i].innerHTML=dataarray[i].innerHTML;
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}

show/hide with same ids

I searched a lot on Stackoverflow, solution for my question, but no one of them helped me. I have a multiple show/hide (toggle) content, with same id's and I want to make, that the only one of them, what I need, opens, not all of them. There's my JSFiddle You can test it.
This is my JavaScript
$("#view").click(function(){
$('.hidden-content').slideToggle(500).toggleClass("active");
});

You cannot have duplicate id attributes within a single document. When you do only the first element with the given id is recognised; hence the issue you've seen.
Instead change the view elements to use a class, then use the this reference within the click event handler to traverse the DOM to find the related .hidden-content element and toggle it. Try this:
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>

It is a bad practice to use same id for more than one elements.
You can try the following
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
and your jquery will look like the following
$(".view").click(function(){
$(this).parent('.content').next('.hiddencontent').slideToggle(500).toggleClass("active");
});

You should replace the id to class. And for accordion, you can use like below.
HTML,
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
Js,
<script>
$(document).ready(function(){
$(".hidden-content").hide();
$(".view").on('click', function(){
$(this).parents().parents().find(".hidden-content").slideToggle(500).toggleClass("active");
if($(this).parents().parents().siblings().find(".hidden-content").hasClass('active')){
$(this).parents().parents().siblings().find(".hidden-content").removeClass('active');
$(this).parents().parents().siblings().find(".hidden-content").hide();
}
});
});
</script>

You can change your click event as follows to make it work.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
Note: You shouldn't have the same id for multiple elements, id attribute value should be unique why because the id attribute is used to identify an element uniquely in the DOM. You can have the same class name for different elements.
Please refer this answer it provides more information on how things work when multiple elements have the same id attribute value.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
#view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>

$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(200).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>

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 select x div inside div

I want to hide() the 2nd and 3rd div with class second inside div.first
<div class="first">
<div class="another"></div>
<div class="second"></div>
<div class="second"></div> // Hide this
<div class="second"></div> // Hide this
<div class="second"></div>
</div>
<div class="first">
<div class="another"></div>
<div class="second"></div>
<div class="second"></div> // Hide this
<div class="second"></div> // Hide this
<div class="second"></div>
</div>
How can I select that every 2nd and 3rd div inside first class
with jquery ?

Try using .each() , .slice()
$(".first").each(function() { $(".second", this).slice(1,3).hide() })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="first">
<div class="another"></div>
<div class="second">first</div>
<div class="second">second</div> // Hide this
<div class="second">third</div> // Hide this
<div class="second">fourth</div>
</div>
<div class="first">
<div class="another"></div>
<div class="second">first</div>
<div class="second">second</div> // Hide this
<div class="second">third</div> // Hide this
<div class="second">fourth</div>
</div>

You can use :lt and :gt selectors.
$('.second:gt(0):lt(2)', '.first').hide();
Fiddle

You can use nth-child for that
$('.second:nth-child(3), .second:nth-child(4)', '.first').hide();
$('.second:nth-child(3), .second:nth-child(4)', '.first').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
<div class="another">1</div>
<div class="second">2</div>
<div class="second">3</div> <!-- Hide this -->
<div class="second">4</div> <!-- Hide this -->
<div class="second">5</div>
</div>
<div class="first">
<div class="another">1</div>
<div class="second">2</div>
<div class="second">3</div> <!-- Hide this -->
<div class="second">4</div> <!-- Hide this -->
<div class="second">5</div>
</div>

show hide alternate div on button click

Hi I am trying to implement a js/jquery program in which the steps are as follow
when someone click button 1 then wrapper div first is hide and wrapper div of 2 button (second ) is shown . similarly for third and forth
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>
I have tried this but know it will not work
<script type="text/javascript">
$('.button').on('click', function(e){
console.log($( this));
$( this ).closest(".wrapper .second").hide();
});
</script>

you could just toggle a class:
$('.button').on('click', function() {
$(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second hidden">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second hidden">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>
JS:
$('.button').on('click', function () {
$(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});
CSS:
.hidden {
display: none;
}
-jsFiddle-

I would check what the parent class is. If its first hide element and show the next, else hide element and show prev, like so:
$('.button').on('click', function(e){
if($(this).parent().attr('class')=='first'){
$(this).parent().hide();
$(this).parent().next().show();
}else{
$(this).parent().hide();
$(this).parent().prev().show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>

Keeping your HTML the same, replace your javascript with:
$('.button').on('click', function(e){
$( this ).closest(".wrapper").find(":hidden").show();
$( this ).closest("div").hide();
});
$('.second').hide();
See jsFiddle

Develop Reference

JavaScript is the programming language of the Web.

Get throu each div and change class on Button-click - javascript

Related

Fill divs with content from hidden directory

show/hide with same ids

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

jQuery select x div inside div

show hide alternate div on button click

Categories

Resources