Div element with data attr get seperate indexes with same data-attr divs

Question

I have a structure like below

<div data-example="1"></div>
<div data-example="2"></div>
<div data-example="1"></div>
<div data-example="3"></div>
<div data-example="2"></div>
<div data-example="2"></div>
<div data-example="4"></div>

To this structure additional divs can be added with different valued data-example 4-5-6-9 etc.

I want to get indexes of divs with same data-example attr and add it as html element. For example

<div data-example="1">Index is 0 for data 1</div>
<div data-example="2">Index is 0 for data 2</div>
<div data-example="1">Index is 1 for data 1</div>
<div data-example="3">Index is 0 for data 3</div>
<div data-example="2">Index is 1 for data 2</div>
<div data-example="2">Index is 2 for data 2</div>
<div data-example="4">Index is 0 for data 4</div>

For detail

Index is 0 for data 1 this is the first div whch have data-example with 1 value and this is the first div among the div which have data-example value 1 and its index is 0 the second div with data-example = 2 get the index 1.

How can I get the indexes dynamically with jquery.

Question is unclear . why `Index is 0 for data 2` and `Index is 0 for data 3`...so on for others? What is the logic behind that> — Alive to die - Anant, Sep 07 '17 at 11:01
Because the divs must be grouped for their data-example value. İf they grouped they will get that indexes. — Kenan Saltik, Sep 07 '17 at 11:40
Am I correct in thinking `Index is x for data y` means `This is the x th time I have seen y`? — jrtapsell, Sep 07 '17 at 11:43

Alive to die - Anant · Accepted Answer · 2017-09-07T14:00:19.800

You have to use jQuery prevAll() like below:-

$('div').each(function(){
  var attr = $(this).attr('data-example');
  if (typeof attr !== typeof undefined && attr !== false) {
    var counter = $(this).prevAll('div[data-example='+$(this).data('example')+']').length;
    $(this).text("Index is "+counter+" for data "+$(this).data('example'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-example="1"></div>
<div data-example="2"></div>
<div data-example="1"></div>
<div data-example="3"></div>
<div data-example="2"></div>
<div data-example="2"></div>
<div data-example="4"></div>

<div>Unchanged</div>

Thank you for your 100% correct answer @Alive to Die – Kenan Saltik Sep 07 '17 at 13:38 — Kenan Saltik, Sep 07 '17 at 13:38

Amit Kumar Singh · Answer 2 · 2017-09-07T13:38:40.293

1

You can use the filter function for this.

var allItems = $("div").filter("[data-example]");

var mV = 0;
if (allItems.length > 0) {
  $(allItems).each(function(k, v) {
    var val = $(this).attr("data-example");
    if (mV < val) mV = val;
  })

  for (var ic = 1; ic <= mV; ic++) {
    $(allItems).filter("[data-example='" + ic + "']").each(function(key, value) {
      //console.log(key);  //  this is index
      //Here updated the div text correctly.
      $($(this)[0]).html("Index is " + key + " data " + ic);
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-example="1">Index is 0 for data 1</div>
<div data-example="2">Index is 0 for data 2</div>
<div data-example="1">Index is 1 for data 1</div>
<div data-example="3">Index is 5 for data 3</div>
<div data-example="2">Index is 1 for data 2</div>
<div data-example="2">Index is 0 for data 2</div>
<div data-example="4">Index is 0 for data 4</div>

Reference: https://stackoverflow.com/a/2903048/7974050

edited Sep 07 '17 at 13:38

answered Sep 07 '17 at 11:05

Amit Kumar Singh

4,393
2
9
22

Thank you for reply but I want indexes of divs with same data-example value first div with data-example 1 will get index 0 second div with data-example 1 will get index 1 and first div with data-example 2 will get index 0 second div with data-example 2 will get index 1 and so on. – Kenan Saltik Sep 07 '17 at 11:31
Answer updated. You can use the filter with attribute value also. – Amit Kumar Singh Sep 07 '17 at 11:34
Yes this one can be the solution because it works but I try to find a solution without predefine the ic value because maybe there data-example value will be more than 10 and ic value must be predefined and this isn't possible in my situation. And when we predefined the ic value the each function will run 10 times but 4 is enough in above example. If I can't get a better answer I will be select your answer as correct. Of course If I can't find myself the solution thank you @Amit – Kenan Saltik Sep 07 '17 at 12:05
Thank you for your answer this is also correct I must look the performance of two different implementation thank you @Amit – Kenan Saltik Sep 07 '17 at 13:46

Div element with data attr get seperate indexes with same data-attr divs

2 Answers2