将成对的对象链接在一起，而无需在javascript中触摸它们

Question

I have simple problem and Im looking for elegant solution.

There is list in my html. I used jquery to map its items into array. So I have array of objects. Then I made (again with jquery) buttons for each item one. So I have pairs, item and button is in each pair.

Now lets assume, I want to make structure, that will link somehow these pairs together. So if I use jquery to select any element, then I will be able to find element associated with it. I still have some ideas, but they are looking too complicated. Im looking for design pattern or something very close to it.

HTML structure:

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li id="active">item 3</li>
</ul>

So far my idea that didn't work in javascript/jquery (it is very simplified):

var list = [];

$('li').each(function() {
    list.push($(this));
    });

// this should be object, that links list items with buttons
var linker = {};

for (var item in list) {
    var button = $('<button>Do something!</button>');

    // this part is crazy O.o
    linker[list[item]] = button;
    linker[button] = list[item];
    // it doesnt work, becouse toString() function make from any of these objects "[object Object]"
}


// Now code like this should be able to find button that belongs to item 3

var active = $('#active')[0];

var result = linker[active];

Please show me the most easy way, how to link two object together without touching its properties. Thanks for any help.

Answer 1

how to link two object together without touching its properties.

As you have seen, an object as a key-value-map doesn't work because its keys are stringified. In future JavaScript, you will be able to use a Map (or even a WeakMap which fits better for you), but such is not possible yet. However, you can use a Map shim that works by storing key and value objects in arrays with correspondent indices. If you implement your own, you can also do a reverse-lookup on the same arrays.