Combine the heights of all selected elements using jQuery

I'm working with this piece of code

            $('.gallery').each(function(){
                var thumbCount = $(this).find('.ngg-gallery-thumbnail-box').size();
                var rows = thumbCount/5;
                var height = rows*145;
                $(this).css({'height':height+24});
            });

This function calculates the height of each .gallery div. Now, I want to take it a step further and add up all those height values from within the each function (to get the total height for all .gallery divs) but I'm not sure how to do that.

Can someone please demonstrate the correct syntax for achieving this?

Thank you!

jquerycss

Answer №1

When looking at your current code:

let totalHeight = 0;
$('.gallery').each(function(){
    let thumbCount = $(this).find('.ngg-gallery-thumbnail-box').length;
    let rows = thumbCount/5;
    let height = rows*145;
    totalHeight += height;
    $(this).css('height', height+24);
});

In addition, here's how I would slightly simplify the existing code:

let totalHeight = 0;

$('.gallery').each(function(){
    let thumbCount = $(this).find('.ngg-gallery-thumbnail-box').length,
        rows = thumbCount/5,
        height = rows*145;

    totalHeight += height;

    $(this).css('height', height+24);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting a PHP timestamp to a jQuery-compatible format

Can someone help me find the equivalent function in jQuery that will give me a time format similar to this: date( 'Y-m-d\TH:i:sP'); //the output is like this. 2013-10-30T18:10:28+01:00 I am looking for this specific format in jQuery to use ...

javascriptjqueryjson

Updating an element on the page without having to reload the entire page

I have implemented a functionality on my Laravel page where multiple locations can be saved. Now, I am looking to enhance this feature by allowing users to edit and update location data without refreshing the page. Below is the HTML form structure: <for ...

htmljqueryajaxlaravel

Css technique for changing color on mouse hover

I currently have a social media bar on my website with icons for Facebook, Twitter, Google+, and RSS. Here is how it looks: When I hover over the icons, I want the circle around the image to change color to blue. However, every attempt I've made end ...

htmlcssimagehoveropacity

Stop the use of JavaScript to control the browser's back button in an ASP.NET environment

I have encountered an issue where a JavaScript code called from the server side works fine initially. However, when the user navigates back to the page using the browser's back button, the JavaScript code (specifically ScriptManager.RegisterStartupScr ...

javascriptjqueryasp.net

When is success triggered in AJAX - through promise and callback functions?

At this moment, my code looks like the following: $.ajax({ url: apiUrl + valueToCheck, data: { format: 'json' }, error: function () { }, dataType: 'json ...

javascriptjqueryajax

Automatically populating state and city fields with zip code information

Starting out in the world of web development, I encountered a challenge with a registration form I'm constructing for our company. For guidance, I referred to this resource: http://css-tricks.com/using-ziptastic/. This project marks my initial interac ...

javascriptjqueryajaxjsonforms

Cross-domain PHP AJAX using jQuery

While working on my web application, I encountered a challenge with an iframe from a different domain. Despite writing jQuery scripts in the iframe to pass data to the parent window, JavaScript restrictions prevent direct communication between domains. To ...

phpjqueryajax

Trouble with Flex 3 styles not fully applying to dynamically generated tabs within a TabNavigator

When using ActionScript to dynamically create a tab, I noticed that the style is applied to the skins but not to the text of the newly created tab until I click on another tab and then go back to it. ActionScript private function clickAddTabHandler(event ...

cssapache-flexactionscript-3

jquery version 1.8 includes support for case-insensitive searching using the "starts with

Currently seeking a plugin/extension for jQuery's :contains selector that is case insensitive and only matches words starting with the specified text. The goal is to prevent 'account' results when searching for 'count' specificall ...

jquerycontainscase-insensitivestartswith

How can the class value be retrieved using event.target?

I have an element in the DOM with the class 'tag'. I would like to verify if the class name is 'tag' and display a message if it's true. This is what I tried: $("#thread").each(function(event) { if(event.target.c ...

jquery

Manipulate the url bar using ajax and window.location

When making an AJAX request using .load, everything works perfectly. However, there is an issue with the URL bar. I am trying to change the URL displayed in the bar. For instance, when the ajax loads the about/contact page, I want the URL bar to show about ...

javascriptjqueryajaxwindow.location

I'm having trouble integrating the daterangepicker into my template for filtering date ranges

Models.py class ExpensesLog(models.Model): entry_date = models.DateField(auto_now_add=True) log_id = models.AutoField(primary_key=True) # F description = models.CharField(max_length=200) amount = models.IntegerField() def __str__(se ...

jquerydjangopython-3.xdaterangepicker

Can an image be allowed to overflow outside of a div without changing the div's size?

Starting Point I am in the process of designing a layout with Bootstrap 4. Here's a rough representation of what I am aiming for: https://i.sstatic.net/7QTpk.jpg And here is the basic structure: <div class="row"> <div class="col-12 c ...

htmlcsstwitter-bootstrapbootstrap-4

Animate a dotted border with CSS

How can I make a text block with a dotted style border move like a gif image using CSS at runtime? ...

cssborder

Unable to update `margin: 0;` on child divs

Can anyone help me remove the margins of the child divs so that the squares defined at #overview > div are aligned next to each other? #overview { display: inline-block; margin: 0em; padding: 0em; background: green; } #overview > div { ...

htmlcss

Tips for referencing the team name and showcasing it in HTML despite the interference of the backslash character

{ offset: 0, results: [ { teamname_link/_text: "BAL", teamname_link: "", }, ...

htmlcssjson

A guide on manipulating CSS with jQuery

I have a challenge with a Div element on my website. I want to change the text color of all links within the parent Div when someone hovers over it. I am trying to achieve this by calling the function "highlight" on hover. Unfortunately, the current code ...

jquerycss

CSS: Concealing a separate div

I am working with a parent div in my code that has 2 child divs. I am hoping to find a way to hide the second child when hovering over the first child, using only CSS or JavaScript. Take a look at my Fiddle here <div class="parrent"> <div id ...

javascripthtmlcsssiblings

Is it possible to nest multiple onClick events within each other?

I've been working on creating a pomodoro clock that includes both break and session timers. My approach involves using a single numpad to input data into each clock by nesting the 'click' event to set the time for each. The idea is to click ...

javascriptjquerycss

preserving dynamic CSS class allocation upon page refresh

The problem at hand: Upon clicking the menu in MVC3, a selected class is assigned. Unfortunately, this class is reset after the page reloads. An attempt was made to resolve this issue using jQuery cookies, but the values are not being assigned correctly. ...

jquerycssasp.net-mvc-3