Question

我尝试使用jQuery将子导航元素关系返回给它的兄弟，然后使用代表其顺序的数字向每个兄弟添加数据属性。

因此，如果有兄弟姐妹，第三个兄弟姐妹有数据链接=＆＃34; 3＆＃34;。

导航链接的顺序由用户在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);
});

目前在每个链接中返回带有data属性的值，但每个链接的值为＆＃34; 1＆＃34;。

Answer 1

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

您可能希望迭代所有兄弟姐妹并填写值列表。

然后迭代第二个选择器结果并相应地填充

伪示例：

$(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]);
    });
  });

Answer 2

请使用'each'来访问每个元素，因为索引可以从'each'本身获得，你可以写：

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

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

2 个答案: