返回的第n个子数字，然后将其添加到该链接作为数据属性

我想使用jQuery返回到其兄弟的子导航元素关系，然后将数据属性添加到每个兄弟他们的顺序。返回的第n个子数字，然后将其添加到该链接作为数据属性

所以，如果有兄弟姐妹，第三个兄弟姐妹有data-link =“3”。

导航链接的顺序由用户在CMS中确定。

我现在的HTML结构是：

<nav> 
    <a class="season-nav-link" href="#">1</a> 
    <a class="season-nav-link" href="#">2</a> 
    <a class="season-nav-link" href="#">3</a> 
    <a class="season-nav-link" href="#">4</a> 
</nav>

而我的JS是：

$(function(){ 
    var ordernum = ($("nav.season-slider-nav a").index()+1); 
    var orderlink = $("a.season-nav-link"); 
    $(orderlink).attr('data-info', ordernum); 
});

目前是在各个环节中的数据属性的回报，但每一个的值为“1” 。

来源

2017-10-14 Michael Heimes

发生这种情况是因为您只使用第一个选择器结果的第一个元素。

你可能想迭代所有兄弟并填写一个值列表。

然后遍历第二选择结果并相应地填充

伪例如：

$(function(){ 
    var ordernum = []; 
    $("nav.season-slider-nav a").each(function(index, element){ 
     ordernum.push(index+1); 
    }); 
    $("a.season-nav-link").each(function(index, element){ 
     $(element).attr('data-info', ordernum[index]); 
    }); 
    });

来源

2017-10-14 21:44:03 efkin

我得到了一些错误与此。 this.index不是一个函数。 –

@MichaelHeimes刚刚编辑了答案。希望这有效。 – efkin

这给了我错误：ordernum.append不是一个函数。 –

PLS使用“每个”来访问每个元件中，由于索引可从获得“各自”本身，你可以只写：

$(function(){ 
    $("nav a").each(function(index, elem) { 
    $(elem).attr('data-info', index + 1); 
    }); 
});

来源

2017-10-14 23:49:36

你是男人！这很简单，它运作得很好。我有很多东西要学习JS和jQuery。我希望尽快将足够的时间放在一边研究，而不是试图操纵我发现的片段。谢谢！ –

我实际上正在返回奇怪的值。 13,14,15,16。 –

猜测你的导航里面有很多anchor（a）元素（索引是基于所有元素的）。如果你想更具体一些，你可以在'nav'或'a'中添加类名或相关选择器：$（“nav.className a.className”）。each（.... –

返回的第n个子数字，然后将其添加到该链接作为数据属性

回答

相关问题