How can I get ID from "ul" dynamic tag

javascript html ajax

55 观看


8 作者的声誉

I have the next situation. I have a button in HTML code. When I press one of the options from the button I call a function that constructs the content from other button.

I have a ul tag in HTML code with a list of li tags inside. The value of this li tags are generated dynamically with a query database. When I generate the options from li tags I assign a different ID to each other. Here you can see the code that I have for the second button:

<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>
<ul class="dropdown-menu" id="test2">

Here you can see the code that I have to generate the li tags inside the button.

<script type="text/javascript">

function selectedUbi(ubicacion){
  var datos = {
    "arg" : ubicacion
    data:  datos,
    url:   'condatabase/calculos_bdd2.php',
    type:  'post',
    success:  function (response) {
            document.getElementById("test2").innerHTML = "";
            var ul = document.getElementById("test2");
            for (i=0;i<response.length;i++){
                var li = document.createElement("li");
                li.setAttribute("id", "element"+i);

The question that I have is... how can I get the ID from the li tag that I generate dynamically?

I tried to use "getElementByID" and "getElementByTagName" but as the ID is dynamic I have no idea to caught the value.

For example the button have the next options to select: - apple (ID= element0) - bannana (ID= element1) - carrot (ID= element2)

When I select the option "bannana" I need to get the ID "element1".

作者: olga fm 的来源 发布者: 2017 年 12 月 27 日

回应 1


2272 作者的声誉

You can use querySelectorAll on your container to get a list of elements and then read their attribute id.

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

However, I would rather recommend to create a data layer abstraction to handle operations related to data fetching, etc... in order to avoid a strong coupling on your html structure and your "logic" code.

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

so your button handlers can share that "store"

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 ... */})

作者: laurent 发布者: 2017 年 12 月 27 日