DIV要素ATTR同じデータATTRのdivで別々のインデックスを取得

Question

私は、追加のdiv要素が異なる値のデータ例を添加することができるこのような構成に

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

以下のような構造を有します4-5-6- 9など

divsのインデックスを同じdata-attrで取得し、html要素として追加したいと考えています。例えば

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

について詳細について

指数は、これは1つの値とデータ例を有するwhch最初のdivであり、これは、データ、例えば値1を有するDIVのうち最初のdivであるデータ1は0でありますそのインデックスは0です。data-example = 2の2番目のdivインデックスを取得します。

jqueryでインデックスを動的に取得するにはどうすればよいですか。

Answer 1

あなたは以下のようにjQueryのprevAll()を使用する必要があります： -

$('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>

Answer 2

このためにフィルタ機能を使用できます。

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>

参考：https://stackoverflow.com/a/2903048/7974050