Javascript object key by element id? (jQuery)
<p>This looks like a very simple issue, but I just can't get it to work.</p>

<p>I have a Javascript object like this:</p>

<pre><code>var person = {};
person.one = {gender: 'male', name: 'John'};
person.two = {gender: 'male', name: 'Doe'};
person.three = {gender: 'female', name: 'Jane'};
</code></pre>

<p>Then I have some HTML like so:</p>

<pre><code>&lt;a id="one"&gt;click&lt;/a&gt;
&lt;a id="two"&gt;click&lt;/a&gt;
&lt;a id="three"&gt;click&lt;/a&gt;
</code></pre>

<p>Now, I need to get the correct object value by the id of the clicked link. So basically, I need to dynamically access the 1st-level object keys without a for-loop, since the keys are strings.</p>

<p>I've tried this:</p>

<pre><code>$('a').click(function() {
   alert(person[$(this).attr('id')['gender']]);
});
</code></pre>

<p>It didn't work. Neither did this:</p>

<pre><code>$('a').click(function() {
   alert(person.($(this).attr('id')).gender);
});
</code></pre>

<p>All I get back is an "uncaught exception: Syntax error, unrecognized expression". Obviously, my syntax is way off.</p>

<p>I've already read through many posts on here, but couldn't find the solution. Any ideas?</p>
