0

我有以下小提琴： http: //jsfiddle.net/mauricederegt/mjdyW/17/它包含几个列表，使用javascript自动生成。所有工作都按预期进行。

现在在<a>标签中，我希望有不同的属性，每个属性都根据不同的值递增，但都从 0 开始。我在谷歌和这个网站上搜索了一些关于如何做到这一点的教程，但没有一个有效。

我有 5 个属性（已经在小提琴中注释掉了）：

  1. '数据-i': ,
  2. '数据-t': ,
  3. '数据-f': ,
  4. '数据-r': ,
  5. '数据-c': i++,

那么目标是什么？（我会分别解释每个属性需要，但都应该在同一个<a>）

data-i:应该从 0 计数到最后一个，<a>甚至扩展列表，所以：

<ul>
  <li>
    <a data-i="0">test</a>
    <a data-i="1">test</a>
    <a data-i="2">test</a>
  </li>
  <li>
    <a data-i="3">test</a>
    <a data-i="4">test</a>
    <a data-i="5">test</a>
  </li>
</ul>
<ul>
  <li>
    <a data-i="7">test</a>
    <a data-i="8">test</a>
    <a data-i="9">test</a>
  </li>
  <li>
    <a data-i="10">test</a>
    <a data-i="11">test</a>
  </li>
</ul>

data-f:应该从 0 开始计数，并且计数必须在下一个<ul>甚至扩展列表中增加，所以：

<ul>
  <li>
    <a data-f="0">test</a>
    <a data-f="0">test</a>
    <a data-f="0">test</a>
  </li>
  <li>
    <a data-f="0">test</a>
    <a data-f="0">test</a>
    <a data-f="0">test</a>
  </li>
</ul>
<ul>
  <li>
    <a data-f="1">test</a>
    <a data-f="1">test</a>
    <a data-f="1">test</a>
  </li>
  <li>
    <a data-f="1">test</a>
    <a data-f="1">test</a>
  </li>
</ul>

data-r:应该从 0 开始计数，并且计数必须在下一个<li>不扩展列表中增加，所以：

<ul>
  <li>
    <a data-r="0">test</a>
    <a data-r="0">test</a>
    <a data-r="0">test</a>
  </li>
  <li>
    <a data-r="1">test</a>
    <a data-r="1">test</a>
    <a data-r="1">test</a>
  </li>
</ul>
<ul>
  <li>
    <a data-r="0">test</a>
    <a data-r="0">test</a>
    <a data-r="0">test</a>
  </li>
  <li>
    <a data-r="1">test</a>
    <a data-r="1">test</a>
  </li>
</ul>

data-c：应该从 0 开始计数，并且计数必须在下一个<a>不扩展任何东西：注意：我已经使用 `i++' 解决了这个问题

<ul>
  <li>
    <a data-c="0">test</a>
    <a data-c="1">test</a>
    <a data-c="2">test</a>
  </li>
  <li>
    <a data-c="0">test</a>
    <a data-c="1">test</a>
    <a data-c="2">test</a>
  </li>
</ul>
<ul>
  <li>
    <a data-c="0">test</a>
    <a data-c="1">test</a>
    <a data-c="2">test</a>
  </li>
  <li>
    <a data-c="0">test</a>
    <a data-c="1">test</a>
  </li>
</ul>

EXTRA：data-t：不应从 0 开始计数，但应包含与其所在类相同的数据，例如：

<ul>
  <li>
    <a class="a" data-t="a">test</a>
    <a class="b" data-t="b">test</a>
    <a class="c" data-t="c">test</a>
  </li>
  <li>
    <a class="a" data-t="a">test</a>
    <a class="b" data-t="b">test</a>
    <a class="c" data-t="c">test</a>
  </li>
</ul>
<ul>
  <li>
    <a class="a" data-t="a">test</a>
    <a class="b" data-t="b">test</a>
    <a class="c" data-t="c">test</a>
  </li>
  <li>
    <a class="a" data-t="a">test</a>
    <a class="b" data-t="b">test</a>
  </li>
</ul>

我知道这很多，希望一切皆有可能。最终目标应类似于：

<a class="j" data-i="0" data-t="j" data-f="0" data-r="0" data-c="0"></a>
<a class="f" data-i="1" data-t="f" data-f="0" data-r="0" data-c="1></a>
etc

非常感谢

亲切的问候

ps我的英语不是很完美，所以我希望这些例子能说明我需要什么

4

2 回答 2

1

我认为这应该有效（未经测试）

var i_count=0;
$('ul a').each(function(){
    $(this).attr('data-t', $(this).attr('class'));
    $(this).attr('data-i',i_count);
    i_count++;
});

var f_count=0;
$('ul').each(function(){
    $(this).find('a').each(function(){
        $(this).attr('data-f', f_count);
    });
    f_count++;
});
r_count=0;
$('ul').each(function(){
    $(this).find('li').each(function(){
        $(this).find('a').each(function(){
            $(this).attr('data-r',r_count);
        });
        r_count++;
    });
    r_count=0;
});
于 2012-08-21T20:47:11.640 回答
1

试试这个：http: //jsfiddle.net/mjdyW/18/

于 2012-08-21T21:38:59.200 回答