I have the following structure of my HTML code:
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<div class="bb-custom-side">
Hello
</div>
<div class="bb-custom-side">
<button id="add">Click Here to add The page</button>
</div>
</div>
<div class="bb-item">
<div class="bb-custom-side">
<p>This is first page</p>
</div>
<div class="bb-custom-side">
<p>Hello</p>
</div>
</div>
<div class="bb-item">
<div class="bb-custom-side">
<p>This is second Page</p>
</div>
<div class="bb-custom-side">
<p>This is last page</p>
</div>
</div>
</div>
When I click on button with id=add I want to create the a new div after the last bb-item div with same two div inside it having class name bb-custom-side.
I know how to create the div using createElement and it a class, but I don't know how to create the sub div inside that newly created div. Can I associate with the last child or similar concept?
So after click event I want my HTML to be something like this:
<div id="bb-bookblock" class="bb-bookblock">
<div class="bb-item">
<div class="bb-custom-side">
Hello
</div>
<div class="bb-custom-side">
<button id="add">Click Here to add The page</button>
</div>
</div>
<div class="bb-item">
<div class="bb-custom-side">
<p>This is first page</p>
</div>
<div class="bb-custom-side">
<p>Hello</p>
</div>
</div>
<div class="bb-item">
<div class="bb-custom-side">
<p>This is second Page</p>
</div>
<div class="bb-custom-side">
<p>This is last page</p>
</div>
</div>
<--Newly created div-->
<div class="bb-item">
<div class="bb-custom-side">
new div
</div>
<div class="bb-custom-side">
new div 2
</div>
</div>
</div>
Use clone() to create copy of div elements and append it to main div:
$("#add").click(function(){
var clonedDiv = $(".bb-item:last").clone();
clonedDiv = clonedDiv.find("div.bb-custom-side p").text("This is third Page");
$("#bb-bookblock").append(clonedDiv);
});
DEMO FIDDLE
NOTE: I just updated text for last div (This is third Page). You have to put it in loop to increase number.
Try this.
$('#add').on('click',function(){
$('.bb-item').eq(1).append($('.bb-item:last-child').html());
});
OR
$('#add').click(function(){
$('.bb-item').eq(1).append($('.bb-item:last-child').html());
});
Working Demo
You can try this.
$(document).ready(function () {
$("#add").click(function () {
$("#bb-bookblock").append('<div class="bb-item"><div class="bb-custom-side"> new div</div><div class="bb-custom-side">new div 2</div></div>');
});
});
DEMO
This may not appeal to everyone, but, personally, I tend to like "blank slates" for my cloning.
If it were me, I would do this:
var $baseItem = $("<div></div>").addClass("bb-item");
var $baseCustomSide = $("<div></div>").addClass("bb-custom-side");
$("#add").click(function(){
var $newItem = $baseItem.clone();
$newItem.append($baseCustomSide.clone().html("your_first_content_here"));
$newItem.append($baseCustomSide.clone().html("your_second_content_here"));
$("#bb-bookblock").append($newItem);
});
Unless there is a really good reason to reuse an existing element, I find you end up having to be a lot more complex to "scrub" the existing content from the clone . . . using a blank template always seems more clean to me.
Related
I've this loop in WordPress that displays post.
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1"></div>
<div class="child-2">
<div class="sub-child">
</div>
</div>
</div>
This 'parent-div' is in loop and it repeats 20-30 times for each post. For some of the posts, sub-child div would have no content, and in that case I want to hide 'child-1' div just for that particular post.
Solution in jQuery, JavaScript or PHP is fine.
Hope that makes sense.
Thanks.
You can try following
$(".parent-div").each((i,e) => {
if(!$(e).find(".child-2 .sub-child").text().trim()) $(e).find(".child-1").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1">Text 1</div>
<div class="child-2">
<div class="sub-child">
</div>
</div>
</div>
<div class="parent-div" id="unuqueIdHereForEachBlock">
<div class="child-1">Text 2</div>
<div class="child-2">
<div class="sub-child">
Some text
</div>
</div>
</div>
Try this with jQuery, where you can iterate over each parent div and check for text. if text length is zero then hide child div
$(function(){
$(".parent-div").each(function(){
var text = $(this).find(".child-2 > .sub-child").text();
if(text.length==0) {
$(this).find(".child-1").hide();
}
});
});
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>
I have got this html code
<div class="chatp">
<div class="chatpart">
</div>
</div>
And in my jquery i am trying to append
<div class='headchat'>
</div>
Inside chatp but it appends it after chatpart and here is what happens
<div class="chatp">
<div class="chatpart">
</div>
<div class='headchat'>
</div>
</div>
What i want is
<div class="chatp">
<div class='headchat'>
</div>
<div class="chatpart">
</div>
</div>
You can use prepend to append in start.
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
Reference: https://api.jquery.com/prepend/
Example:
<div class="chatp">
<div class="chatpart">
</div>
</div>
<script>
$('.chatp').prepend('<div class="headchat"></div>');
</script>
Use Jquery prepend function $
$(".chatp").prepend("<div class='headchat'> </div");
A webpage with HTML looks like this:
<div id="Parent-div" > </div>
<div class="first-child-div"> </div>
<div class=" second-child-div">
<div class="first-grand-child"> </div>
<div class="second-grand-child"> </div>
<div class="Third-grand-child">
<div class="Grand-grand child">
<button class="Confirm-button">Confirm!</button>
</div>
</div>
</div>
I've Tried This code using greasemonkey to remove
a button from the div with the class named "Grand-grand child"
This is what I did:
var targetDiv = document.querySelector("#<Parent-div>. Grand-grand.child");
targetDiv.innerHTML = "Hello world!";
The Button wasn't replaced by the Hello world! text, What did I do wrong?
document.querySelector('.Grand.grand.child');
Demo: http://jsfiddle.net/yGv3v/
You should change <div class=" Grand grand child"> to <div class="Grand-grand-child"> and then you can select it with $('.Grand-grand-child').
Edit
If you want to use pure JavaScript, then you can select the node element via
var grandChildChildNode = document.getElementsByClassName('Third')[0].children[0]
This should work in sufficiently modern browsers.
Ive made a fiddle of my problem here.
http://jsfiddle.net/E9cUS/1/
JavaScript:
$('.top').click(function () {
var thisPage = $(this).closest('.yesNoItem');
$('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
$(this).css("display", "none");
});
});
});
$('.yesNoNext').click(function () {
$(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
//This isnt working? Please advise?
$(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
});
});
HTML:
<div id="stage">
<div class="yesNoOuter">
<div class="yesNoItem" style="opacity:1;">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 1</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
<div class="yesNoItem">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 2</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
</div>
</div>
I've also put the line of code thats not working.
Bascially it is hiding the element that I want, but not fading the next one in...
Can any one advise based upon my code? Many thanks!
You had an error in your markup
<div class="yesNoNext">More</span>
if you correct that, next() works http://jsfiddle.net/E9cUS/2/
I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).
Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).
If you correct your HTML it should work (at least it should select the right element).
If they are actually supposed to be nested, then .next() is the wrong method anyways.