insertAfter Repeating Elements

Question

I am building an eCommerce site on a CMS where the Product Names are on top of the Image. I would like to move the Product Name below the Image.

I am using:

$( ".productListNames" ).insertAfter( ".productListImageContainer" );

The problem though, is that it takes every .productListNames element and puts them under the .productListImageContainer on every single product.

How can I get around this?

Thanks!

Answer 1

Use a loop to apply this logic to each item. The products probably all have their own container:

$('.container-of-every-item').each(function () {
    var $container = $(this);
    $container.find('.productListName').insertAfter($container.find('.productListImageContainer'));
});

Does this help?