Tengo una lista de productos que son Hombres y Mujeres, usando Javascript debajo de cada producto. Quiero imprimir un mensaje para decirles a los usuarios que estos productos están disponibles en cualquier tamaño que esté en stock. Para determinar qué productos son para hombres y mujeres, miro el href y me dirijo a "ropa de mujer" y "ropa de hombre", lo que funciona, pero cuando imprimo los mensajes, no se ubican correctamente debajo de los productos, como puede ver cuando ejecuta el código. Cualquier ayuda en esto sería apreciada.
Tenga en cuenta que no tengo acceso al html para realizar cambios.
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>Dado que la clase para el precio es la misma para todos los productos: productPrice , debe usar el operador CSS Sibling ~ para seleccionar los elementos que son hermanos del elemento <a> específico.
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>