"ul"동적 태그에서 ID를 가져 오는 방법

Question

다음 상황이 있습니다. HTML 코드로 된 버튼이 있습니다. 버튼에서 옵션 중 하나를 누르면 다른 버튼의 내용을 구성하는 함수가 호출됩니다.

내부에 li 태그 목록이있는 HTML 코드의 ul 태그가 있습니다. 이 li 태그의 값은 쿼리 데이터베이스를 사용하여 동적으로 생성됩니다. li 태그에서 옵션을 생성 할 때 서로 다른 ID를 할당합니다. 다음은 내가 두 번째 버튼이 코드를 볼 수 있습니다 당신은 내가 버튼 내부의 리튬 태그를 생성해야하는 코드를 볼 수 있습니다 여기에

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

I는이 문제 ... 어떻게 내가 동적으로 생성하는 리튬 태그의 ID를 얻을 수 있나요?

"getElementByID"및 "getElementByTagName"을 사용하려고했지만 ID가 동적이어서 값을 포착 할 생각이 없습니다.

예를 들어 버튼을 선택하기 위해 다음 옵션을 사용할 수 있습니다 - 사과 (ID = element0) - bannana (ID =에서 element1) - 당근 (ID =이 element2)

내가 옵션을 선택

"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