0

私は次のフィドルを持っています: http://jsfiddle.net/mauricederegt/mjdyW/17/ JavaScriptを使用して自動生成されたいくつかのリストが含まれています。すべてが意図したとおりに機能します。

今<a>タグで、nr がそれぞれ異なる値に応じて増加するさまざまな属性を持ちたいのですが、すべて 0 から始まります。Google とこのサイトでこれを行う方法のチュートリアルを検索しましたが、どれも機能しませんでした。

私は5つの属性を持っています（すでにフィドルでコメントアウトされています）：

  1. 「データ-i」: ,
  2. 「データ-t」: ,
  3. 'データ-f': ,
  4. 'データ-r': ,
  5. 'data-c': i++,

それで、目標は何ですか？(各属性の必要性を個別に説明しますが、すべて同じにする必要があります<a>)

data-i:<a>リストを拡張しても、0 から最後までカウントする必要があります。

<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 からカウントする必要があり、count<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>

追加: 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 に答える