I've encountered a challenge while using a plugin that restricts access to the HTML, but allows for adding CSS and Javascript. I am aiming to achieve the following:
- Determine if a specific class within a div is active
- If it's 'active', locate all instances of labels inside that element
- Arrange groups of 8 label instances into columns (33% width of parent container)
- If there are less than 8 instances, take no action
Despite several attempts, I'm struggling to find the right approach. Here is an excerpt of my current code:
function columnSnap() {
$('.productFilter').each(function() {
if ($(this).is(":visible")) {
$(this).find('label').addClass('randomClass');
if ($('.randomClass').length >= 8) {
//Get next 8 instances and group within a created div
//Continue until number of instances of randomClass finishes
}
}
});
}
columnSnap();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productFilter">
<div class="randomDiv">
</div>
<div class="checklist">
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
<label class="randomClass"></label>
</div>
</div>I have a general idea of what needs to be done but facing difficulties with implementation. Any advice or suggestions would be greatly appreciated. Thank you