"ul"動的タグからIDを取得する方法

Question

次の状況があります。 私はHTMLコードでボタンを持っています。私がボタンからオプションの1つを押すと、他のボタンからコンテンツを構築する関数を呼び出します。

私は内部にliタグのリストを含むHTMLコードのulタグを持っています。このliタグの値は、クエリデータベースを使用して動的に生成されます。 私はliタグからオプションを生成するとき、私はお互いに異なるIDを割り当てます。 ここでは、私は2番目のボタンを持っているコードを参照することができます：あなたは、私はボタン内部のliタグを生成する必要があるコードを見ることができます。ここ

<div class="dropdown" class="btn-group-lg" id="test"> 
<button name="selSensor" id="seltipoSensor" class="btn btn-primary dropdown- 
toggle" type="submit" data-toggle="dropdown"> 
    <span>Select one option</span> 
</button> 
<ul class="dropdown-menu" id="test2"> 
</ul> 
</div> 

を。

<script type="text/javascript"> 


function selectedUbi(ubicacion){ 
    var datos = { 
    "arg" : ubicacion 
    }; 
    $.ajax({ 
    data: datos, 
    url: 'condatabase/calculos_bdd2.php', 
    type: 'post', 
    success: function (response) { 
     if(response){ 
      document.getElementById("test2").innerHTML = ""; 
      var ul = document.getElementById("test2"); 
      for (i=0;i<response.length;i++){ 
       var li = document.createElement("li"); 
       li.appendChild(document.createTextNode(response[i][i+1])); 
       li.setAttribute("id", "element"+i); 
       li.setAttribute("onclick",myFunction); 
       ul.appendChild(li); 
      } 
     } 
    }, 
    dataType:"json" 
    }); 
} 
</script> 

私が持っている問題は、私は私が動的に生成するのliタグからIDを取得することができますどのように... のですか？

私は "getElementByID"と "getElementByTagName"を使用しようとしましたが、IDが動的なので値を捕まえることはできません。

たとえば、ボタンを選択するために、次のオプションがあります。 を - りんご（ID =要素0） - bannana（ID =要素1） - ニンジン（ID =要素2）

私は、オプションを選択すると、「bannana "私はID" element1 "を取得する必要があります。

Answer 1

コンテナにquerySelectorAllを使用して要素のリストを取得し、その属性IDを読み取ることができます。

function getIds(container){ 
    return [...container.querySelectorAll('li[id]')].map(li => li.getAttribute('id')); 
} 

しかし、私はむしろあなたのHTML構造とあなたの「ロジック」コードの強い結合を避けるために...など、データフェッチに関連する業務を処理するために、データ層の抽象化を作成することをお勧めします。

function createStore(){ 
    return { 
    async fetch(arg){ /*... return your data (and cache it etc */ } 
    }; 
} 

ので、あなたのボタンのハンドラは、 "ストア"

const store = createStore(); 

document.getElementBy('button1').addEventListener('click',() => { 
    store.fetch().then(data => { /* do something with your data like updating html ... */}) 
}); 

document.getElementBy('button2').addEventListener('click',() => { 
    store.fetch().then(data => { /* do something with your data like updating html ... */}) 
}); 

//etc