Currently, I am utilizing a function to adjust the height of li tags that are retrieved from a database. Additionally, I am using jQuery to assign different classes to certain li elements based on their position within a row.
The issue I am encountering is that while the positioning aspect of the jQuery statement consistently works, the equal heights part tends not to trigger at times - particularly when dealing with an empty cache. However, it reliably activates upon refreshing the page or revisiting it for the second time.
You can view a live example here! (let me know if it functions correctly for you!)
Below is the jQuery code snippet that I am currently using:
jQuery.fn.equalCols = function(){
//Array Sorter
var sortNumber = function(a,b){return b - a;};
var heights = [];
//Push each height into an array
$(this).each(function(){
heights.push($(this).height());
});
heights.sort(sortNumber);
var maxHeight = heights[0];
return this.each(function(){
//Set each column to the max height
$(this).css({'height': maxHeight});
});
};
jQuery(document).ready(function($) {
$(".thumbs").each(function(i) {
if (i % 4 == 0)
$(this).addClass("start");
if (i % 4 == 3)
$(this).addClass("end");
});
$(".thumbs").each(function(i) {
if (i % 3 == 0)
$(this).addClass("start");
if (i % 3 == 2)
$(this).addClass("end");
});
$(".event_thumbs").each(function(i) {
if (i % 2 == 0)
$(this).addClass("start");
});
$('.thumbs, .end, .start').equalCols();
});
If you have any suggestions for improving the code or alternative methods to achieve the desired outcome, please don't hesitate to share them. Likewise, if you know how to resolve the issue and make it work flawlessly - your input would be greatly appreciated!