Question

I’m building a list of links dynamically using an array, which will result in something like this:

<div>
   <p class="link">label</p>
   <p class="link">label</p>
   <p class="link">label</p>
   <p class="link">label</p>
   <p class="link">label</p>
</div>
<div>
   <p class="link">label</p>
   <p class="link">label</p>
   <p class="link">label</p>
   <p class="link">label</p>
   <p class="link">label</p>
</div>

Then I would have a click handler:

$(".link").click(function(){
//do something
 myarray[?].stuff;
});

I want to retrieve something from an array, but I’m not sure what the best way is to reference the link. I could add the array key as an id in the p tag, however I’m wondering if there is a more elegant way of handling it.

Answer 1

You could use the index, but that will give you :

<div>
   <p class="link">label</p> //0
   <p class="link">label</p> //1
</div>
<div>
   <p class="link">label</p> //0
   <p class="link">label</p> //1
</div>

//js
$(".link").on('click', function(){
    myarray[$(this).index()].stuff;
});

You could use the parents index aswell, something like :

<div>
   <p class="link">label</p> //0
   <p class="link">label</p> //1
</div>
<div>
   <p class="link">label</p> //10
   <p class="link">label</p> //11
</div>

//js
$(".link").on('click', function(){
    var numb = parseFloat($(this).parent().index().toString() + $(this).index().toString());
    myarray[numb]);
});​

FIDDLE

or a data attribute

<div>
   <p class="link" data-i="0">label</p>
   <p class="link" data-i="1">label</p>
</div>
<div>
   <p class="link" data-i="2">label</p>
   <p class="link" data-i="3">label</p>
</div>

//js
$(".link").on('click', function(){
    myarray[$(this).data('i')].stuff;
});