Wie bekomme ich ID von "ul" dynamischen Tag

Question

Ich habe die nächste Situation. Ich habe eine Schaltfläche im HTML-Code. Wenn ich eine der Optionen von der Taste drücke, rufe ich eine Funktion auf, die den Inhalt von einer anderen Taste erzeugt.

Ich habe ein UL-Tag im HTML-Code mit einer Liste von Li-Tags innerhalb. Der Wert dieser li-Tags wird dynamisch mit einer Abfragedatenbank generiert. Wenn ich die Optionen von li-Tags erzeuge, weise ich mir eine andere ID zu. Hier können Sie den Code sehen, dass ich für die zweite Schaltfläche haben:

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

Hier können Sie den Code sehen, dass ich die li-Tags innerhalb der Schaltfläche zu generieren.

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

Die Frage, die ich habe, ist ... wie kann ich die ID aus dem li-Tag bekommen, dass ich dynamisch generieren?

Ich habe versucht, "getElementByID" und "getElementByTagName" zu verwenden, aber da die ID dynamisch ist, habe ich keine Idee, den Wert zu erfassen.

Zum Beispiel haben die Taste, um die nächsten Optionen auszuwählen: - apple (ID = element0) - bannana (ID = element1) - Karotte (ID = element2)

Wenn ich wählen Sie die Option „bannana "Ich muss die ID" element1 "bekommen.

Answer 1

Sie können querySelectorAll auf Ihrem Container verwenden, um eine Liste der Elemente zu erhalten und dann ihre Attribut-ID zu lesen.

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

Allerdings würde ich eher empfehlen, eine Datenschicht Abstraktion zu schaffen Operationen zu verarbeiten, um Daten in Bezug zu holen, etc ..., um eine starke Kopplung auf Ihrer HTML-Struktur und Ihren „Logik“ Code zu vermeiden.

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

so Ihre Schaltfläche Handler können, dass "store" teilen

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