Question

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

如果我点击..lets说第146个“.Link”它会让我做第146次“。内容”

对内容所做的某事无论如何，它都没有改变。它总能完成同样的功能。

我没有这个起点，只是想法......我怎么能实现这个目标？

Answer 1

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

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

jsFiddle example

Answer 2

获取单击元素的索引，使用该索引访问Content元素。

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

Answer 3

试试这个：

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

Answer 4

我的想法：我在生成HTML时使用属性“position”，然后根据知道我正在处理的位置。我认为它比遍历DOM更快地计算出元素的位置。

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

Answer 5

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

因此......在你的情况下，（link1.nextSibling）会给（link2）。

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

5 个答案: