I've got a list of products which are Men & Women, using Javascript below each product I want to print a message to tell users that these products are available in whatever sizes are in-stock. To determine which products are Men & Women, I'm looking at the href and targeting "womensclothing" & "mensclothing" which works but when i go to print the messages they don't sit below the products correctly as you can see when you run the code. Any help on this would be appreciated.
Please note i do not have access to the html to make changes.
var womensClothing = document.querySelectorAll('.productTitle[href*="womensclothing"]');
var womenSizeLocation = document.querySelectorAll('.productPrice');
womensClothing.forEach(function(link, i) {
womenSizeLocation[i].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + link.getAttribute('href') + "><p>Women's sizes:xs, s, m, l</p></a>");
});
var mensClothing = document.querySelectorAll('.productTitle[href*="mensclothing"]');
var menSizeLocation = document.querySelectorAll('.productPrice');
mensClothing.forEach(function(links, el) {
menSizeLocation[el].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + links.getAttribute('href') + "><p>Men's Sizes: s, m, l, xl </p></a>");
});.productWrapper {
margin: 0 0 10px;
border: 1px solid black;
}<div class="productWrapper">
<a class="productTitle" href="/mensclothing/">Mens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/mensclothing/">Mens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/womensclothing/">Womens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/womensclothing/">Womens Product</a>
<div class="productPrice">€35,00</div>
</div>Since the class for the price is same for all products: productPrice, you need to use the CSS Sibling operator ~ to select the elements that is the sibling of the specific <a> element.
var womensClothing = document.querySelectorAll('.productTitle[href*="/womensclothing"]');
var womenSizeLocation = document.querySelectorAll('.productTitle[href*="/womensclothing"] ~ .productPrice');
womensClothing.forEach(function(link, i) {
womenSizeLocation[i].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + link.getAttribute('href') + "><p>Women's sizes:xs, s, m, l</p></a>");
});
var mensClothing = document.querySelectorAll('.productTitle[href*="/mensclothing"]');
var menSizeLocation = document.querySelectorAll('.productTitle[href*="/mensclothing"] ~ .productPrice');
mensClothing.forEach(function(links, el) {
menSizeLocation[el].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + links.getAttribute('href') + "><p>Men's Sizes: s, m, l, xl </p></a>");
});.productWrapper {
margin: 0 0 10px;
border: 1px solid black;
}<div class="productWrapper">
<a class="productTitle" href="/mensclothing/">Mens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/mensclothing/">Mens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/womensclothing/">Womens Product</a>
<div class="productPrice">€35,00</div>
</div>
<div class="productWrapper">
<a class="productTitle" href="/womensclothing/">Womens Product</a>
<div class="productPrice">€35,00</div>
</div>