Javascript JQuery根据第n个数字获取链接并添加变量

我有一个包含链接的列表。在此列表是另一个链接之前，这是html：

<div class="catItemBody">
    <div class="catItemImage">
        <a href="index.html">Link</a>
    </div>
    <ul class="sigProBetton">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

<div class="catItemBody">
    <div class="catItemImage">
        <a href="index2.html">Link</a>
    </div>
    <ul class="sigProBetton">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</div>

最后，我想在此基础上构建，以便第一个项目中的链接具有URL变量？image=1，然后第二个项目将具有？image=2等。。。我需要重置“计数”，以便下一个.catItemBody中的列表将在？image=1处重新开始

目前，每个链接都有变量？image=1，这并不理想。我已经在设置了一个JSFIDLE

编辑

---

您的所有答案似乎都有效，但问题是我在页面上有不止一个

.catItemBody

，可以在找到更新的JSFIDLE。您可以利用jQuery的

index（）

方法

---

下面是更新jsFiddle:

您可以利用jQuery的

index（）

方法

---

下面是更新JSFIDLE:

无需使用第n个子项

我不明白您是否要重置图像计数，因此此处不重置：

$(document).ready(function () {
    var count = 0;
    $('.catItemBody').each(function () {
        var linkitem = $(this).find('.catItemImage a').attr('href');
        $(this).find('ul.sigProBetton li').each(function () {
            count++;
            $(this).find('a').attr('href', linkitem + '?image=' + count);
        });

    });
});

jsFiddle：

在这里它被重置：

$(document).ready(function () {
    $('.catItemBody').each(function () {
        var linkitem = $(this).find('.catItemImage a').attr('href');
        $(this).find('ul.sigProBetton li').each(function (index) {
            $(this).find('a').attr('href', linkitem + '?image=' + (index + 1));
        });

    });
});

---

无需使用第n个子项

我不明白您是否要重置图像计数，因此此处不重置：

$(document).ready(function () {
    var count = 0;
    $('.catItemBody').each(function () {
        var linkitem = $(this).find('.catItemImage a').attr('href');
        $(this).find('ul.sigProBetton li').each(function () {
            count++;
            $(this).find('a').attr('href', linkitem + '?image=' + count);
        });

    });
});

jsFiddle：

在这里它被重置：

$(document).ready(function () {
    $('.catItemBody').each(function () {
        var linkitem = $(this).find('.catItemImage a').attr('href');
        $(this).find('ul.sigProBetton li').each(function (index) {
            $(this).find('a').attr('href', linkitem + '?image=' + (index + 1));
        });

    });
});

---

这可能不是最好的方法，但我是这样做的：

    var pre = $('.catItemImage').children('a').attr('href');
    var links = $('.sigProBetton li a'),count=1;
    $(links).each(function() {
        $(this).attr('href',pre+'?image='+count);
        count += 1;
    });

---

这可能不是最好的方法，但我是这样做的：

    var pre = $('.catItemImage').children('a').attr('href');
    var links = $('.sigProBetton li a'),count=1;
    $(links).each(function() {
        $(this).attr('href',pre+'?image='+count);
        count += 1;
    });

---

已更新

 $(document).ready(function () {


   $('.catItemBody').each(function () {
      var linkitem = $('.catItemImage a', this).attr('href');
      var $this=$(this); 
      $this.find('ul.sigProBetton li').each(function (index) {
         $this.find('a').attr('href', linkitem + '?image=' + (index + 1));
      });

   });
 });

---

更新

 $(document).ready(function () {


   $('.catItemBody').each(function () {
      var linkitem = $('.catItemImage a', this).attr('href');
      var $this=$(this); 
      $this.find('ul.sigProBetton li').each(function (index) {
         $this.find('a').attr('href', linkitem + '?image=' + (index + 1));
      });

   });
 });

---

使用

：第一个孩子

而不是

：第n个孩子（1）

使用

：第一个孩子

而不是

：第n个孩子（1）

问题是页面上有多个.catItemBody，因此您的答案只需要最后一个.catItemBody的链接，另外，图像计数会跟随到下一个.catItemBody中的下一个列表，而不是重置。您应该将此添加到问题中。问题是页面上有多个.catItemBody，因此您的答案只会获取上一个.catItemBody的链接，图像计数会跟随到下一个.catItemBody中的下一个列表，而不是重置。您应该将此添加到问题中。问题是页面上有多个.catItemBody，因此您的答案只会获取上一个.catItemBody的链接，图像计数将跟随下一个.catItemBody中的下一个列表，而不是重置。我已经相应地更新了我的问题。谢谢你，你的答案是完美的。非常感谢：）问题是页面上有多个.catItemBody，因此您的答案仅获取上一个.catItemBody的链接，此外，图像计数会跟随到下一个.catItemBody中的下一个列表，而不是重置。我已经相应地更新了我的问题。谢谢你，你的答案是完美的。非常感谢：）