I have a scenario where I want to find all elements with a certain class, and then I want to set the parent div's padding-bottom value as the sum of its current padding-bottom value + the height of the original div which matched the selector.
So say I have a structure like this:
<div class='A'>
<div class='B'>
<div class='C'>
.........
</div>
<div class='D'>
.........
</div>
</div>
<div class='B'>
<div class='C'>
.........
</div>
</div>
<div class='B'>
<div class='C'>
.........
</div>
</div>
<div class='B'>
<div class='D'>
.........
</div>
</div>
</div>
I want to find all class D objects, and then I want to set the padding bottom value of their container class B, to the height of the class D object in question, plus whatever padding-bottom value that class B object currently has ..
Note that all class D objects have different heights ..
Every class B objects can only have a max of 1 class D object
Every class B objects can only have a max of 1 class C object
What jQuery do I need to do the above ?
Try this:
$('.D').each(function(){
$(this).parent().css("paddingBottom", "+=" + $(this).height() +"px");
});
Demo.
$(function(){
$('div.D').each(function(index){
var dHeight = $(this).height();
var bPadding = $(this).parent().css('padding-bottom');
var newPadding = parseInt(dHeight) + parseInt(bPadding);
$(this).parent().css('padding-bottom', String(newPadding) + 'px');
});
});
This should the solution for the problem that you've described. But I think you've missed some details. (this code might be shortened to a one liner though)
$(function() { 'use strict';
$('.A > .D').each(function() {
var $D = $(this);
var $B = $D.closest('.B');
$B.css('padding-bottom',
$D.height() + parseInt($B.css('padding-bottom'))
);
});
});
In case you want to include the height of the .C elements too:
$(function() { 'use strict';
$('.A > .D, .A > .C').each(function() {
var $X = $(this);
var $B = $X.closest('.B');
$B.css('padding-bottom',
$X.height() + parseInt($B.css('padding-bottom'))
);
});
});
Related
I have an issue with showing and hiding content. I am not able to hide or show full content.
My problem is this class for styling faq-link-style. When I remove it, my read more and read less buttons/links work. I think it might be the way I wrote it in JQuery. I tried many different versions but could not get it working.
Example: $('.faq-link-style .read-more')
Is there another way to improve my code? I don't want to duplicate my code. Example: I don't want to get the content twice. Once for an intro (read less, faq-intro) And the other time for the full text (read more, faq-info)
Thanks in Advance
<div class="col-lg-4">
<div class="faq-all">
<div class="faq-item">
<h2><?php the_title(); ?></h2>
<article>
<div class="faq-intro">
<?php the_content(); ?>
</div>
<div class="faq-info">
<?php the_content(); ?>
</div>
<div class="faq-link-style">
Read More
Read Less
</div>
</article>
</div>
</div>
</div>
JQuery:
(function ($) {
$(document).ready(function () {
var showChar = 600; // How many characters are shown by default
$('.faq-intro').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var s = $(this).html();
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + " ... ";
$(this).html(html);
}
if(content.length < showChar){
$(this).parent().find('.read-less').hide();
$(this).parent().find('.read-more').hide();
}
});
$('.faq-info').hide();
$('.read-less').hide();
//read more
$('.read-more').click(function(){
$(this).siblings('.faq-info').show();
$(this).hide();
$(this).parent().find('.read-less').show();
$(this).siblings('.faq-intro').hide();
})
$('.read-less').click(function(){
$(this).siblings('.faq-info').hide();
$(this).hide();
$(this).parent().find('.read-more').show();
$(this).siblings('.faq-intro').show();
});
});
})(jQuery);
Your selectors are wrong, it should be:
$('.read-more').click(function(){
$(this).hide()
.siblings('.read-less').show().end()
.parent()
.siblings('.faq-intro').hide().end()
.siblings('.faq-info').show();
});
$('.read-less').click(function(){
$(this).hide()
.siblings('.read-more').show().end()
.parent()
.siblings('.faq-intro').show().end()
.siblings('.faq-info').hide();
});
With the following HTML:
<div id="main">
<div id="a">
qq
qw
qe
</div>
<div id="b">
qa
qs
qd
</div>
<div id="c">
qz
qx
qc
qv
</div>
</div>
I want to get a list of all the IDs:
a, a!1, a!3, a!2, b, b!1, b!2, b!3, c, c!1, c!2, c!3, c!4
The following code kind of does that:
var arr = $("#main > div").map(function() {
return this.id
});
var aa = (arr.get().join(","));
alert(aa);
but the alert only gives me" "a,b,c"
Is there a better way to do this that I may be missing so it will transverse the DOM of a specific container ID and pass back all the child IDs of all the elements in the container?
Use css selectors in JQuery to iterate through all, instead of direct children:
$(function(){
$('#main *').each(function (){
var id = $(this).attr('id');
console.log(id);
$('#main').append("<br /> -"+id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="a">
qq
qw
qe
</div>
<div id="b">
qa
qs
qd
</div>
<div id="c">
qz
qx
qc
qv
</div>
</div>
Just do
var arr = $("#main > div, #main > div > a").map(function() {
return this.id
});
Your current code gives the id of direct children of #main but not of a
Just add anchors to query:
$("#main div, #main a")
Codepen
var ids = []
$("a").each(function(){
ids.push($(this).attr("id"))
})
var total_id='';
$('#main *').each(function(){
total_id+=$(this).attr('id')+',';
})
console.log(total_id);
Please try this.
I am calulating the childrens height, to add the scrollbar to the container. but it's not come as perfect. any one help me to calculate the childrens height perfectly?
here is my js :
var p= "</p>Some testing text</p>";
var getAllHeight = function (content) {
var allHeight = 0;
$('#container').children().not('.content').each(function(){
allHeight += $(this).outerHeight(true);
});
return allHeight;
}
var addHeight = function () {
var content = $('.content');
var allHeight = getAllHeight(content);
var rest = $('#container').innerHeight() - allHeight;
if(content.outerHeight() > rest) {
content.css('height', (content.outerHeight() - allHeight ));
}
console.log(allHeight, content.height(), content.outerHeight(),content.innerHeight())
};
$('button').click(function(){
$('.content').append(p);
addHeight();
});
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
<div class="button"><button>Add</button></div>
</div>
JSfiddle
This is CSS issue due to collapsing margins (read "Parent and first/last child" case) on div>h2 structure. Since div containers don't have any padding, margin or border, their margins collapse to accommodate inner margin. Simple fix is to set some padding on them or border or set h2 to inline-block.
Another issue is that when there is not enough space you should set content height to rest.
if (content.outerHeight() > rest) {
content.css('height', rest);
}
Demo: http://jsfiddle.net/doesfmnm/5/
I have some divs with same class. Inside this divs i added another div to put an ad.
Now i am trying to hide the ad div if the width of the div that holds my ad div is equal to 366px;
I tried the code bellow but it hides only my first ad div..
Example:
<div class="masterdiv">
<div id="myaddiv"></div>
</div>
<div class="masterdiv">
<div id="myaddiv"></div>
</div>
<div class="masterdiv">
<div id="myaddiv"></div>
</div>
and my jquery code is:
var adwidth = $(".masterdiv").width();
if (adwidth == 366){
$('#myaddiv').hide();
}
Thank you!
Because var adwidth = $(".masterdiv").width(); only returns the first value. The answer is in your title, you need to use each. Another issue is ids are SINGULAR, so you need to use a class
Using each:
$(".masterdiv").each( function() {
var elem = $(this);
var width = elem.width();
if (width == 366){
elem.find('.myaddiv').hide(); //use a class since only one element can have an id
}
});
Using filter:
$(".masterdiv").filter( function() {
return ($(this).width() == 366);
}).find('.myaddiv').hide();
The updated HTML:
<div class="masterdiv">
<div class="myaddiv"></div>
</div>
you should not use duplicate ids.use:
$('div .masterdiv').each(function(){
if($(this).width()==366){
$(this).find('div').hide();
}});
Try:
$('.masterdiv').each(function(){
if($(this).width()==386){
$(this).hide();
}
});
This is only doing the first div because you are using id's instead of classes. Since there can only be one id per page javascript stops after matching the first one. change to classes and you should be fine.
you are using same id's for different divs
Instead of id, give class name
<div class="masterdiv">
<div class="myaddiv">
</div>
</div>
<div class="masterdiv">
<div class="myaddiv">
</div>
</div>
<div class="masterdiv">
<div class="myaddiv">
</div>
</div>
$(document).ready(function () {
var adwidth = $(".masterdiv");
for (i = 0; i < adwidth.length; i++) {
if ($(adwidth[0]).attr("width") == 366) {
$(this).find('.myaddiv').hide()
}
}
});
$(".masterdiv").each(function(){
var current = $(this);
if(current.width() == 366) {
current.hide();
}
});
You have to change in this way:
$('#myaddiv', '.masterdiv').each(function() {
var width = $(this).width();
(width > 366) ? $(this).hide() : 0;
});
You can try on this live DEMO
I don't know what am I doing wrong.. but I have 3 columns where I want to apply equal heights
here is my html
<div id="wrapper">
<div class="LeftBG"></div>
<div id="MainBlock">THIS IS A TEST</div>
<div class="RightBG"></div>
<!-- END CONTENT BLOCK -->
</div>
and here is my function and just doesn't work....
var highestCol = Math.max(
$('.LeftBG').height(),
$('.RightBG').height());
$('#MainBlock').height(highestCol);
To see what I am doing click here
Change your code to this to set all three blocks to the same height:
var highestCol = Math.max(
$('.RightBG').height(),
$('.LeftBG').height());
$('#MainBlock, .RightBG, .LeftBG').height(highestCol);
See it here: http://jsfiddle.net/jfriend00/Rv4fr/
What you did fixes the middle column, now apply it to the other classes as well...
var highestCol = Math.max(
$('.RightBG').height(),
$('.LeftBG').height());
$('#MainBlock').height(highestCol);
$('.RightBG').height(highestCol);
$('.LeftBG').height(highestCol);