Appending data value from parent to child element using jquery

Question

I have a product grid page. Each product is wrapped in a container div (class="container"). That div has a part number in a data-part-id element. Nested within the container div is a span (class="name" that contains the part name. I want to use jquery to fetch the parent part number and insert it after each part name contained within the span. Below is my code:

require(['jquery','domReady'],function($,domReady) {
    domReady(function(){
        $('container').each(function(index,v) {
            var $v = $(v);
            $v.find('span.name').append($v.data('data-part-id'));
        });
    });
});

Answer 1

Instead of $v.data('data-part-id') use $v.data('part-id') or $v.attr('data-part-id') and you also missing a dot in container selector. Since container is a class, it should be $('.container') instead of $('container') So your code should be

domReady(function(){
        $('.container').each(function(index,v) {
            var $v = $(v);
            $v.find('span.name').append($v.data('part-id'));
        });
    });

Here is working fiddle