jQuery - 按顺序动态链接元素..？答案

【问题标题】：jQuery - Dynamic linking of elements in order..?jQuery - 按顺序动态链接元素..？
【发布时间】：2011-09-13 00:35:41
【问题描述】：

我有两个不同的类“.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”做点什么

如果我点击 ..let 说第 146 个“.Link”，它会让我对第 146 个“.Content”做点什么

对内容所做的某事无论它是什么，它都不会改变。它总是做同样的功能。

我对此没有起点，只有想法……我怎样才能做到这一点？

【问题讨论】：

标签： jquery dynamic hyperlink

【解决方案1】：

使用index 和eq。 index 告诉您元素在其兄弟元素中的位置，eq 从选择中的位置获取元素。

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

jsFiddle example

【讨论】：

【解决方案2】：

获取点击元素的索引，使用该索引访问内容元素。

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案4】：

我的想法：我会在生成 HTML 时使用属性“位置”，然后基于该知道我正在处理的位置。我认为它比遍历 DOM 来确定元素的位置要快。

如果您不生成 HTML 内容，我建议通过加载的文档以编程方式添加属性。

【讨论】：

【解决方案5】：

如果您要将所有内容放入单个（也称为 DOM）对象，则很有可能使用 .nextSibling 功能在 JAVASCRIPT 中按顺序操作/链接这些内容。

因此...在您的情况下， (link1.nextSibling) 将给出 (link2)。

【讨论】：