Question

I’m not even sure I’m asking or going about this the right way but it’s probably easier if I just show it. Basically, I’m trying to have run an attr of each div as a parameter through a function and have it return a different result based on that div’s attr.

The example, as you can see, is a group of dropdowns that appear when you click on a link in the container div. If you make a selection it saves that as a attr in the parent div. The problem arises when you click out, then back in on the container … instead of reshowing each dropdown with the appropriate default or selection showing, it just mirrors the result of the a next to it.

http://jsfiddle.net/nosfan1019/b7F6x/5/

TIA

Answer 1

foo = foo.find('.dropdown-toggle').html(_new + '<b class="caret"></b>');

with this line you get two divs and hence you’ve change both values(in case the value was chosen from the droplist).

To restore selected values correctly:

function modified(_select) {
    console.log("modify");
    foo = $('#box').html();
    foo = $(_select).html(foo);
    // iterate on collection to restore selected value from selection tag;
    foo.filter("div[selection]").each(function(i, v){
        var selected = $(v).attr('selection');
        $(v).find('.dropdown-toggle').html(selected + '<b class="caret"></b>');                
    });                
}

Then, it’s needed to be checked if any of parentDiv has [selection] attr:

if($(y).filter("div[selection]").length > 0){
    return modified(y);
}         

http://jsfiddle.net/b7F6x/50/