jQuery - динамическое связывание элементов в порядке ..?

Question

У меня есть два разных класса ".Content" и ".Link", которые я хочу .. "сопоставить" в соответствии с позицией / порядком.

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>

Что я пытаюсь достичь, так это как-то всегда связать их по порядку.

Если бы я щелкнул первый «.Link», это позволило бы мне сделать что-то с первым «.Content»

и если я нажму ... скажем 146-й ".Link", это позволит мне сделать что-то с 146-м ".Content"

что-то , которое делается с содержанием, каким бы оно ни было, оно не меняется. Он всегда будет выполнять ту же функцию, что и когда-либо.

У меня нет для этого отправной точки, только идея ... Как я могу этого достичь?

Answer 1

Используйте index и eq.index сообщает вам позицию элемента среди его братьев и сестер, а eq получает элемент из позиции в выборе.

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

jsFiddle пример

Answer 2

Попробуйте это:

$(function(){
 $(".Link").click(function(){
    var index = $(".Link").index(this);
    var content= $(".Content").eq(index);
     //Do Something with content.
 });
});

Answer 3

Получите индекс элемента, по которому щелкнули, используйте этот индекс для доступа к элементу Content.

$('.Link').click(function () {
    var content = $('.Content').eq($(this).index($('.Link')))
}

Answer 4

Если вы поместите весь свой контент в один объект (он же DOM), вполне возможно манипулировать / связывать их в заказах в JAVASCRIPT, используя функцию .nextSibling.

Следовательно ...в вашем случае (link1.nextSibling) выдаст (link2).

Answer 5

Моя идея: я бы использовал атрибут «позиция» при генерации этого HTML, а затем на основании того, что знаю, с какой позицией я работаю.Я думаю, что это быстрее, чем обход DOM для определения положения элемента.

Если вы не генерируете контент HTML, я предлагаю добавить атрибут программно через загруженный документ.