JSON parsed attributed duplicates on elements

Question

I believe I have a complex problem. I load a form from another page via jQuery.load() and then I'm taking it's attributes, parse it via JSON and getting certain attribute from it. Here's the JS:

function getFilter() {
        var hash = window.location.hash;
        if(hash.length) {
            var hash2 = hash.replace('#',''),
            exhash = hash2.split('&'),
            getsize = exhash[0],
            size = getsize.split('='),
            getcat = exhash[1],
            cat = getcat.split('=');

            $('.prod').each(function() {
                var link = $(this).attr('data-target');

                $(this).append('<div class="field" style="display: none"></div>');
                $(this).children('.field').load(link + ' form', function() {
                    var el = $(this).parent();
                    var form = $('.field').children('form').attr('data-product_variations'),
                        parse = $.parseJSON(form);
                            var searchTerm = size[1];
                            console.log(parse)
                            $.each(parse, function(i, item) {
                                console.log(item)
                                $.each(item, function(j, innerItem){
                                    if(typeof(innerItem.attribute_pa_rozmiar) != "undefined"){ if(innerItem.attribute_pa_rozmiar == searchTerm)
                                    {
                                        console.log(el);
                                        $(el).children('a').css('background','url('+parse[i].image_src+')');
                                        $(el).children('a').animate({
                                            opacity:1
                                        },200)
                                    }
                                    }
                                });

                            });

                });

            })
        }
    };

My problem is, very often both .prod divs have the same background-image, even if I run console.log and values seem to be different. What can I do?

score 2 · Accepted Answer · answered Jul 01 '13 at 15:30

var form = $('.field').children('form').attr('data-product_variations'),

^ I believe this line is your problem. You're not specifying the div with class field inside the current '.prod' element.

Try rewriting these lines:

$(this).append('<div class="field" style="display: none"></div>');
$(this).children('.field').load(link + ' form', function() {
    var el = $(this).parent();
    var form = $('.field').children('form').attr('data-product_variations'),

As this instead:

var field = $('<div class="field" style="display: none" />');
$(this).append(field);
field.load(link + ' form', function() {
    var el = $(this).parent();
    var form = field.children('form').attr('data-product_variations'),

JSON parsed attributed duplicates on elements

1 Answers1

Linked