Basically, I want to be able to click the div with the class click-to-add and then I want that to add another div with the class duplicate above the click-to-add div and directly after the first duplicate div.
<div class="site-table-row header">
<div class="site-table-row duplicate">
<div></div>
<div></div>
<div></div>
</div>
<div class="site-table-row">
<div class="click-to-add">Click Me</div>
</div>
</div>
Thank you in advance for any assistance/direction!
$(document).ready(function (){
$('button').click(function (){
$('.header').append($('.header').html())
/* console.log($('.header').html()); */
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-table-row header">
<div class="site-table-row duplicate">
<div>1</div>
<div>1</div>
</div>
<div class="site-table-row">
<button class="click-to-add">Click Me</button>
</div>
</div>
Solved with
$('.click-to-add').click(function () {
$('.duplicate').clone().insertAfter('.duplicate').last();
});
I made it with pure js but I think it can help you at least with the concept:
<div class="site-table-row header">
<div id="duplicatediv" class="site-table-row duplicate">
<div></div>
<div></div>
<div></div>
</div>
<div class="site-table-row">
<div class="click-to-add" onClick="addStuff();">Click Me</div>
</div>
</div>
<script>
const addStuff = () => {
let div = document.getElementById('duplicatediv');
var x = document.createElement("DIV");
var t = document.createTextNode("This is the duplicate.");
x.appendChild(t);
div.appendChild(x);
}
</script>
https://jsfiddle.net/s7epxLua/
it selects the div with an Id with getElementById, and then appends a div to it.
Related
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>
Will you please tell me that how i hide mother .secondchild if parent has child class.
Here is the code
HTML code
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
Here is my script but not working
if ($(".parent").hasClass("child")) {
$('.mother .secondchild').hide()
}
since your parent div has no class called child, your script won't give the desired output.
try this
if($('.parent').children().hasClass('child')){
$('.mother .secondchild').hide();
}
DEMO HERE
EDIT
Based on OP's Comment hidden the div in the button click.
Html
<button id="btnClick">
Click Me
</button>
JS
$('body').on('click','#btnClick','',function(){
if($('.parent').children().hasClass('child')){
$('.mother .secondchild').hide();
}
});
UPDATED DEMO
$(function(){
$("body").on("click",".click",function(){
if ($(".parent ").children("div.child")) {
$('.mother .secondchild').hide()
}
})
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
<button class="click">
button
</button>
</body>
</html>
Do this work without any if condition
$(".parent:has(.child)").next().find(".secondchild").hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
You just change "hasclass" to "has", then it works.
if($('.parent').has('.child')){
$('.mother .secondchild').hide();
}
I want to extract the text of the div on hover but so far I getting the text of all the divs.
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
I tried using the following command :
$('.a').on('hover').text();
Any suggestions?
To get the first div only, target a:first then get the text of that element using this
$('.a').on('mouseenter', function() {
console.log( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
Try this code
$('.a:first').on('mouseenter', function() {
alert( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
You can use the below code to get the text of the hovered div.
$('.a').on('mouseenter', function() {
console.log( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.
Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY
Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');
TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>
I have the following: A bunch of button div's which each have unique info
<div class="button">
<div id="first">
Johny
</div>
<div id="second">
Dog
</div>
<div id="third">
Pasta
</div>
</div>
<div class="button">
<div id="first">
Bob
</div>
<div id="second">
Cat
</div>
<div id="third">
Noodles
</div>
</div>
.
.
.
I'm trying to make it so that when one of these buttons is clicked, i can check the values of the inner divs.
For instance
$('.button').on('click', function () {
// Check to see if the text of the 'first' div is
// johnny or bob or something else
});
First of all you cannot use same id for multiple elements in a page.So,Instead use class for that.Ex:
<div class="button">
<div class="first">
Johny
</div>
<div class="second">
Dog
</div>
<div class="third">
Pasta
</div>
</div>
<div class="button">
<div class="first">
Bob
</div>
<div class="second">
Cat
</div>
<div class="third">
Noodles
</div>
</div>
Now in the javascript:
$('.button').on('click', function () {
var first=this.getElementsByClassName("first")[0];//gets first element of this button
var second=this.getElementsByClassName("second")[0];
var third=this.getElementsByClassName("third")[0];
//Now you do what ever you want
});
Try $(this).children(":first").text() to get fist div's text
<script>
$('.button').on('click', function () {
if ($(this).find("#first").html().trim() == "Johny") {
console.log("The first div is Johny");
} else if ($(this).find("#first").html().trim() == "Bob") {
console.log("The first div is Bob");
}
});
</script>
How about giving each div its own click handler? (you will need unique ids for this to work properly)
<script type="text/javascript">
var bchildren = $('.button').children();
$(bchildren).click(function() {
console.log($(this).html());
});
}
</script>