Let's dive into a bit more detail. I have a gallery with 9 elements aligned to the left, creating 3 elements per line as shown below:
1 2 3 <--line 1
4 5 6 <--line 2
7 8 9 <--line 3
What I am attempting to do is when any element is clicked, I want to add a div below the line it belongs to. For instance, if I click on element 2, it should add a div after the 3rd element between line 1 and 2.
I've tried selecting all the 3rd elements of each line using :nth-child, but I'm struggling to make jQuery comprehend which line it is on. Frankly, I'm baffled about how to tackle this issue.
Any insights or suggestions would be greatly appreciated. Thank you, Constantin Chirila
Later edit: I apologize for the messy code; it's part of a larger project.
<a href="#" class="dealer--item" data="hongkong">
<h4 class="dealer--item-title">Hong Kong</h4>
</a>
<a href="#" class="dealer--item" data="australia">
<h4 class="dealer--item-title">Sweden</h4>
</a>
<a href="#" class="dealer--item" data="sweden">
<h4 class="dealer--item-title">Sweden</h4>
</a>
etc...
</div>
Jquery:
$(".dealer--item").click(function (e) {
var idSelector = $(this).attr('data');
e.preventDefault();
$('.dealer--item').not(this).removeClass('is-selected');
$(this).toggleClass("is-selected");
$(".dealer--item:nth-child(3n)").each(function (index) {
$(this).addClass("foo" + index);
});
$('foo0').after($('#' + idSelector)) //this is where i lost it as its not working for other 6 elements
$('#' + idSelector).fadeToggle(300);
});
And here is the content that needs to be added between the lines based on the clicked element:
<div class="dealer--address" id="australia">
Address here
</div>
<div class="dealer--address" id="hongkong">
Address here
</div>
<div class="dealer--address" id="sweden">
Address here
</div>
etc...