Question

I have two different classes “.Content” and “.Link” that i want to.. “match” according to the position/order.

HTML:

<div class="Content"> Content1 </div> <!-- First of Contents-->
<div class="Content"> Content2 </div>
<div class="Content"> Content3 </div>

<div class="Link"> Link1 </div> <!-- First of links -->
<div class="Link"> Link2 </div>
<div class="Link"> Link3 </div>

What im trying to achieve is to somehow always link these in order.

If i clicked the first “.Link” it would let me do something to the first “.Content”

and if i clicked ..lets say the 146th “.Link” it would let me do something to the 146th “.Content”

The something that is done to the content what ever it is, it doesnt change. It would always do the same function what ever it would be.

I have no starting point for this, just the idea… How could i achieve this?

Answer 1

Use index and eq. index tells you the position of the element among its siblings, and eq gets an element from a position in a selection.

$('div.Link').click(function() {
    var linkIndex = $(this).index();
    $('div.Content').eq(linkIndex).css({color: 'red'});
});

jsFiddle example