HTMLで表示しているデータ配列の番号をjavascript側で取得したい


HTML5とSpring Bootで勉強中です。

下記のような形で、画面上にコントロールソース側から渡したtestLabelが複数表示することを確認でき、  
islinkがtrueの場合に、画面上リンク可能な表示、押下するとjavascript側で`change()`が呼ばれることを確認できました。

ただ、このリストの何番目が押下されたかをjavascript側でどのように取得したらよいのでしょうか。  
また  
HTML側の `<a href="#" th:text="${test.testLabel}" onclick="change()"></a>` も  
期待した動きにはなっているのですが、通常このような記載はおかしいのでしょうか。  
＃onclickのあたりがどうなのだろうと思っています。

■javaコントロールソース側  
下記の情報をもつリストを返しています  
boolean islink  
String testLabel

■HTML側

[code]

    <div th:each="test, stat:${testlist}">
        <div th:if="${test.islink} == false">
            <div th:text="${test.testLabel}"></div>
        </div>
        <div th:if="${test.islink} == true">
            <a href="#" th:text="${test.testLabel}" onclick="change()"></a>
        </div>
    </div>
    
[/code]

■javaScript側

[code]

    function changeLanguage() {
    }
    
[/code]




質問にはjsライブラリについて言及がないので、ピュアjsで書きます。  
今回の問題を一般的にいうと、「ある要素について、その兄弟要素のなかでの順番を得たい」ということになります。であるならば、兄弟要素のリストをループで検索してしまうのが一番簡単でわかりやすいと思います。  
イベントハンドラの設定についてですが、個人的には`onclick`などの属性で設定するよりも、javascriptコードから設定することが、コード分離の観点から推奨されると考えています。またこうした子要素各々について処理を設定する場合、各子要素ではなく、これらを内包するコンテナ（親）要素にイベントハンドラを設定するのがスマートだと思います。  
ここでは、コンテナ要素に対してクリック時のイベントハンドラを設定し、子要素がクリックされたら、その要素の順番を取得するところまでをサンプルコードとして示します。

[code]

    // コンテナ要素にイベントハンドラを設定
    var container = document.getElementById('container');
    container.addEventListener('click', function (e) {
      // クリックされた子要素を特定
      var target = e.target || e.srcElement;
      while (target.parentElement !== container) {
        target = target.parentElement;
      }
      
      // 兄弟要素を検索して順番を取得
      var children = container.children;
      var index = -1;
      for (var i = 0; i < children.length; i++) {
        if (children[i] === target) {
          index = i;
        }
      }
      
      // index === -1のときはエラー
      if (index === -1) {
        console.error(target);
      } else {
        // 処理
        console.log('index = %d', index);
      }
    });
[/code]

[code]

    <div id="container" th:each="test, stat:${testlist}">
        <div th:if="${test.islink} == false">
            <div th:text="${test.testLabel}">text index=0</div>
        </div>
        <div th:if="${test.islink} == true">
            <a href="#" th:text="${test.testLabel}">link index=1</a>
        </div>
        <div th:if="${test.islink} == true">
            <a href="#" th:text="${test.testLabel}">link index=2</a>
        </div>
    </div>
[/code]

不明な点があればお手数ですがコメントをお願いします。

* * *

追記:

[code]

    // クリックされた子要素を特定
    var target = e.target || e.srcElement;
    while (target.parentElement !== container) {
      target = target.parentElement;
    }
    
[/code]

この部分について補足します。まず`var target = e.target ||
e.srcElement;`は、イベントハンドラに渡されるイベントオブジェクトから、実際にクリックイベントが発生したDOM要素を取得しています。`||`で
_srcElement_
を参照しているのは、互換性を考えて（古いブラウザでは`target`プロパティがなく、代わりに`srcElement`に同じものが入っている）のことですので、場合によっては不要かもしれません。  
また、`while()...`の部分ですが、先ほど取得した`target`、つまり実際にクリックイベントが発生した要素というのは、コンテナ要素の直下の要素（つまり子要素）ではなく、さらにその下に位置する孫要素かもしれません。たとえば`<a
href="#" th:text="${test.testLabel}">link
index=1</a>`とかです。こういう場合は兄弟要素のリストを検索しても該当しないので、親要素をたどっていって、コンテナ要素の子要素、つまり`<div
th:if="${test.islink} == true">`までたどり着くという処理になります。説明が下手ですがわからなければまた編集します。

[code]

    <!-- このコンテナ要素にイベントハンドラを設定 -->
    <div id="container" th:each="test, stat:${testlist}">
        <!-- これが子要素 -->
        <div th:if="${test.islink} == false">
            <!-- クリックイベントはこの要素（孫要素）で発生するかもしれない -->
            <!-- これをcontainer.childrenのなかから検索してもみつからない -->
            <div th:text="${test.testLabel}">text index=0</div>
        </div>
    
[/code]

