We have been working on randomizing a series of listings, arranging them in rows of 3 items each. Our goal is to display the entire list in a random order while breaking the line after every 3 entries. Although we have successfully implemented the layout using HTML and CSS, integrating JavaScript has proven to be quite challenging.
HTML - Presenting 2 rows of 3 items. Each row currently enclosed within a parent container
$(document).ready(function(){
$('ul').each(function(){
// obtain current ul
var $ul = $(this);
// get array of list items in current ul
var $liArr = $ul.children('li');
// shuffle array of list items in current ul randomly
$liArr.sort(function(a,b){
// Generate a random number between 0 and 10
var temp = parseInt( Math.random()*10 );
// Determine if the number is odd or even
var isOddOrEven = temp%2;
// Decide whether to add 1 or subtract 1 based on whether the number is greater than 5
var isPosOrNeg = temp>5 ? 1 : -1;
// Return -1, 0, or +1
return( isOddOrEven*isPosOrNeg );
})
// append shuffled list items back to ul
.appendTo($ul);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row__full-width">
<div class="third-width-block" style="background-image: url('someimage.jpg')">
<span class="rectangle_top"></span>
<div class="table">
<h5 class="title">Item Title 1</h5>
<div class="block_content">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="btn btn__primary more_info_btn" href="www.google.ca">Learn More</a>
</div>
</div>
</div>
<div class="third-width-block" style="background-image: url('someimage.jpg')">
<span class="rectangle_top"></span>
<div class="table">
<h5 class="title">Item Title 2</h5>
<div class="block_content">
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="btn btn__primary more_info_btn" href="www.google.ca">Learn More</a>
</div>
</div>
</div>
<div class="third-width-block" style="background-image: url('someimage.jpg')">
<span class="rectangle_top"></span>
<div class="table">
<h5 class="title">Item Title 1</h5>
<div class="block_content">
<p class="description">etc...</p>
</div>
</div>
</div>
</div>
<div class="row__full-width">
etc...
</div>Your assistance on this matter would be greatly valued!
Edit:
We have made some progress by utilizing the script below, adjusting the HTML above so that each "third-width-block" div also includes a "propertyBlock" class. The next step involves breaking the row after every third entry, which can easily be accomplished by wrapping every set of three "propertyBlock" divs in a wrapper with a "row_full-width" class.
Is there a way to implement this?
var cards = $(".propertyBlock");
for(var i = 0; i < cards.length; i++){
var target = Math.floor(Math.random() * cards.length -1) + 1;
var target2 = Math.floor(Math.random() * cards.length -1) +1;
cards.eq(target).before(cards.eq(target2));
}