Hide all divs that contain an element inside - javascript

I have three divs with same class, inside theses divs I have others divs with two different class:
<div class="TotalResults">
<div class="resultPassed"></div>
</div>
<div class="TotalResults">
<div class="resultPassed"></div>
</div>
<div class="TotalResults">
<div class="resultError"></div>
</div>
I would like to hide all divs that have class="resultPassed" inside him. how can I do this with javascript or jquery?

This should work :
$('.resultPassed').parent().hide()

Try it :
$("div").has(".resultPassed").hide();
Final code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="TotalResults">
<div class="resultPassed">I am resultPassed</div>
</div>
<div class="TotalResults">
<div class="resultPassed">I am resultPassed</div>
</div>
<div class="TotalResults">
<div class="resultError">I am not resultPassed</div>
</div>
<button class="btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").on("click",function(){
$("div").has(".resultPassed").hide(1000);
})
})
</script>
</body>
</html>

In Jquery -
$('.resultPassed').parent().hide() will change the display to none.
In pure JS -
var arr = document.getElementsByClassName("resultPassed");
for (var i = 0; i < arr.length; i++) {
arr[i].parentNode.style.display = "none";
}

Related

using javascript to toggle the display of other divs within the main div

The click of the button should toggle the visibility of that corresponding button's div. the first pic is what the code should look like from the start, and the second pic shows what the code should look like after clicking the submit button 1.
.toggleDiv{
background: gray;
max-width: 400px;
}
<!DOCTYPE html>
<html>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<body>
<div class="toggleNav">
<div class="Button1">
<input onclick="toggleMain" type="image" src="images/vinylBtn.png">
Button1
</div>
<div class="Button2">
<input onclick="toggleMain" type="image" src="images/cdBtn.png">
Button2
</div>
<div class="Button3">
<input onclick="toggleMain" type="image" src="images/tapeBtn.png">
Button3
</div>
</div>
<div class="toggleDiv">
<div id="mainText">
<h2>main div</h2>
<p>This is where the different divs shouls be toggling
</div>
<div id="Button1">
<p>This is the first div</p>
</div>
<div id="Button2">
<p>This is the second div</p>
</div>
<div id="Button3">
<p>This is the third div</p>
</div>
</div>
</body>
</html>
You can find all you elements by tag a in toggleNav and then add event listener. See my example in playground https://jsfiddle.net/denisstukalov/ompaeL0d/29/:
const links = document.querySelectorAll("div.toggleNav div a");
for (var i = 0; i < links.length ; i++) {
const divId = links[i].innerText
links[i].addEventListener("click",
function (event) {
event.preventDefault();
document.getElementById(divId).style.display = 'block';
},
false);
}

jQuery how to use toggle function to element in for loop

I'm using toggle function to 4 div's elements. I need to close prev div, when I click second. How can I do it?
$(document).ready(function() {
var $this = $(document).find('.slider-div');
var $thiz = $('.money-transf');
$('.money-transf').click(function(e) {
for (var i = 0; i < $this.length; i++) {
// here i need to add toggle function to $this[i] elements;
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
<p>Element</p>
</div>
<div class='slider-div'>
<p>Inform about element</p>
</div <div class='money-transf'>
<p>Element2</p>
</div>
<div class='slider-div'>
<p>Inform about element2</p>
</div>
You don't need a loop for this. You simply need to call slideUp() on all other .slider-div elements before you toggle the one related to the clicked .money-transf, like this:
$(document).ready(function() {
var $slider = $('.slider-div');
var $transf = $('.money-transf');
$transf.click(function(e) {
var $target = $(this).next('.slider-div');
$slider.not($target).slideUp();
$target.slideToggle();
});
})
.slider-div {
display: none;
}
p {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="money-transf">
<p>Element</p>
</div>
<div class="slider-div">
<p>Inform about element</p>
</div>
<div class="money-transf">
<p>Element2</p>
</div>
<div class="slider-div">
<p>Inform about element2</p>
</div>
Note that I changed the $this and $thiz variable names to something more meaningful and less easy to confuse.
Try this code
$("div").click(function(){
$(this).prevAll().toggle(); // toggle all previous divs
//$(this).prevAll().addClass('hide'); // hide all previous divs
});
.hide{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
<p>Element</p>
</div>
<div class='slider-div '>
<p>Inform about element</p>
</div>
<div class='money-transf '>
<p>Element2</p>
</div>
<div class='slider-div '>
<p>Inform about element2</p>
</div>
You can try following.
Hide all the slider-div`s at the beginning
In click function, hide all the slider-div's and then show the next corresponding slider-div element
$(document).ready(function(){
var transfs = $('.money-transf');
$('.slider-div').hide();
transfs.click(function(e){
$('.slider-div').hide();
$(e.currentTarget).next('.slider-div').show();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
<p>Element</p>
</div>
<div class='slider-div'>
<p>Inform about element</p>
</div>
<div class='money-transf'>
<p>Element2</p>
</div>
<div class='slider-div'>
<p>Inform about element2</p>
</div>

appending images to a div jquery

I have div container, that holds 4 more divs and each of these divs have a header, image and a paragraph tag. What I am making is a game, where when I click on one of the divs, images, the remaining 3 images that were not clicked move to the move to another div section with a class of "enemies". How would I do this without having a bunch of onclick functions for each character?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src = "assets/javascript/game.js"> </script>
</head>
<body>
<div class = "characters">
<div class="charContainer">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer1">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer2">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer3">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
</body>
</html>
jQuery
$(document).ready(function(){
$('#c1').text("Darth Vader");
$('#c2').text("Luke Skywalker");
$('#c3').text("Obi Won");
$('#c4').text("Darth Maul");
var health = $('#c1hp').data('hp');
$('#c1hp').html(health);
var health = $('#c2hp').data('hp');
$('#c2hp').html(health);
var health = $('#c3hp').data('hp');
$('#c3hp').html(health);
var health = $('#c4hp').data('hp');
$('#c4hp').html(health);
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').append(yourCharacter);
});
});
I am trying to move anyone of the <div>s .charContainer, .charContainer1, .charContainer2, .charContainer3 including the header, <img> and <p> tag inside of it to the <div> with id #your.
Update: I found a solution by doing a .each function for the charContainer. Instead of having 4 different charContainers, I just all named them the same class and in the .each function, for each of these classes that did not get appended to the chosen character box, i added a class called .foes, so that I can now differentiate between divs that have been "selected" and those that have not.
I believe your error was that you have different classes for "charContainer" (1,2,3,4). In your case the event should look like
$('.charContainer, .charContainer1, .charContainer2, .charContainer3').on('click', function(){
Also the way you do it - you will add multiple characters clicking on them one after another. How about this:
$(function() {
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').empty().append(yourCharacter.clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "characters">
<div class="charContainer">
<h2 id="c1">Darth Vader</h2>
<img class="vader" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer">
<h2 id="c2">Luke Skywalker</h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer">
<h2 id="c3">Obi Wan</h2>
<img class="obiwan" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer">
<h2 id="c4">Darth Maul</h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
</div>

mouse down not working: jquery

I want to trigger the below function on the mouse down event on the class yeti. However,this does not seem to work.
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
//This code will run after your page loads
$('body').on('mousedown', '.yeti', function(event) {
alert("Yaaaarrrr!");
});
});
</script>
</body>
Your code is correct and should work (I just tested with jQuery 2). Make sure to put something inside the yeti div or make it a fixed size (width and height).
Now it will work perfectlly..:)
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$(".yeti").mousedown(function(){
alert("yeti pressed");
});
});
});
</script>
</body>

Copy the content of a div into another div

I have two divs on my website. They both share the same css properties, but one of them holds 24 other divs. I want all of these 24 divs to be copied into the other div.
This is how it looks like:
<div id="mydiv1">
<div id="div1">
</div>
</div id="div2>
</div>
//and all the way up to div 24.
</div>
<div id="mydiv2">
</div>
I want all of the 24 divs within mydiv1 to be copied into mydiv2 when the page loads.
Thanks in advance
Firstly we are assigning divs into variables (optional)
var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');
Now just assign mydiv1's content to mydiv2.
secondDivContent.innerHTML = firstDivContent.innerHTML;
DEMO
http://jsfiddle.net/GCn8j/
COMPLETE CODE
<html>
<head>
<script type="text/javascript">
function copyDiv(){
var firstDivContent = document.getElementById('mydiv1');
var secondDivContent = document.getElementById('mydiv2');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
</script>
</head>
<body onload="copyDiv();">
<div id="mydiv1">
<div id="div1">
</div>
<div id="div2">
</div>
</div>
<div id="mydiv2">
</div>
</body>
</html>
You can use the .ready() event of jquery
jQuery(document).ready(function() {
jQuery('.div1').html(jQuery("#div2").html());
}
Also a working DEMO.
var divs = document.getElementById('mydiv1').innerHTML;
document.getElementById('mydiv2').innerHTML= divs;
Alternative in jquery You can use clone and put it in your target div. Example:
$('#mydiv1').clone().appendTo('#mydiv2');
Copy #mydiv1 into #mydiv2
Try this one in 2022.
let clonedDiv = document.getElementById('myDiv').cloneNode(true);
document.body.appendChild(clonedDiv);

Categories