CODEWITHSUNDEEP
javascriptjquerylist
Maurice
Maurice

Reputation: 1157

Increment a number using javascript in each <a> in a list, but keep on incrementing extending multiple lists, rows, etc

I have the following fiddle: http://jsfiddle.net/mauricederegt/mjdyW/17/ It contains several lists, auto generated using javascript. All works as intended.

Now in the <a> tags I want to have different attributes with nr's each incremented depending on different values, but all starting at 0. I've searched google and this site for some tutorials of how to do this, but none worked.

I have 5 attributes (already out-commented in the fiddle):

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

So what is the goal? (I'll explain each attribute need separately, but all should be in the same <a>)

data-i: should be counting from 0 to the last <a> even extending the lists so:

<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: should be counting from 0 and count must go up in the next <ul> even extending the lists so:

<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: should be counting from 0 and count must go up in the next <li> NOT extending the lists so:

<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: should be counting from 0 and count must go up in the next <a> NOT extending anything: NOTE: I'VE ALREADY SOLVED THIS ONE USING `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: should NOT be counting from 0 but should contain the same data as the class it's in, so like:

<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>

I know this is a lot, hope it's all possible. The end goal should look something like:

<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

Many thanks

Kind regards

ps my English is not perfect, so I hope the examples make clear what I need

Upvotes: 0

Views: 220

Answers (2)

Royce Feng
Royce Feng

Reputation: 1663

Try this: http://jsfiddle.net/mjdyW/18/

Upvotes: 1

orhanhenrik
orhanhenrik

Reputation: 1415

I think this should work(untested)

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

Upvotes: 1

Related Questions