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

JQuery get link and add variable depending on nth number

本文关键字：数字 添加 变量 获取 链接 JQuery      更新时间：2023-09-26

我设置了一个包含链接的列表。在此列表之前是另一个链接，这是 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);
        }
    });
});

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

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

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

不需要使用第 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);
        });
    });
});

js小提琴 ： 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/

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

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

使用 :first-child 而不是 :nth-child(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));
      });
   });
 });

在这里摆弄

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

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

相关文章：