Question

我有一个包含链接的列表。在此列表之前是另一个链接，这是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>

页面上有多个.catItemBody，每个都包含一个唯一的链接。

我还有一些jquery接受第一个链接（.catItemImage a）并将其应用于列表中的每个链接。我要做的是根据列表项目第n个数字修改此链接。我一直在使用以下jQuery试验第一个链接项：

$(document).ready(function() {

    $('.catItemBody').each(function(){
        var linkitem = $('.catItemImage a', this).attr('href');
        if ($('ul.sigProBetton li').is(':nth-child(1)')){
            $('ul.sigProBetton li a', this).attr('href' , linkitem+'?image=1'); 
        } else {
            $('ul.sigProBetton li a', this).attr('href' , linkitem);
        }
    });

});

最终我想在此基础上进行构建，以便第一项中的链接具有？image = 1的URL变量，然后第二项将具有？image = 2等...我需要'count'来重置所以下一个.catItemBody中的列表将再次从？image = 1开始。

目前，每个链接都有变量？image = 1，这是不理想的。我在http://jsfiddle.net/Dyfe6/设置了一个jsFiddle。

EDIT 您的所有答案似乎都有效，但问题是我在页面上有多个.catItemBody，可以在http://jsfiddle.net/Dyfe6/9/找到更新的jsfiddle

Answer 1

无需使用nth-child。

我不明白你是否要重置图像数量，所以这里没有重置：

$(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：http://jsfiddle.net/Dyfe6/11/

在这里重置：

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

    });
});

http://jsfiddle.net/Dyfe6/12/

Answer 2

您可以利用jQuery的index()方法。 http://api.jquery.com/index/

这是更新jsFiddle：http://jsfiddle.net/ArtBIT/Dyfe6/4/

Answer 3

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

    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;
    });

Answer 4

<强>更新

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

   });
 });

fiddle here

Answer 5

使用:first-child代替:nth-child(1)

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

5 个答案: