如何从“ul”动态标签获得ID

  • Z时代
  • 2024-01-10
  • 分类：问答

我有下一种情况。 我在HTML代码中有一个按钮。当我按下按钮中的其中一个选项时，我调用一个函数来构造其他按钮的内容。如何从“ul”动态标签获得ID

我在HTML代码中有一个ul标签，里面有一个li标签列表。这个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>

我已经是问题... ？我怎样才能从L1标签，我动态生成的ID？

我试图使用“getElementByID”和“getElementByTagName”，但由于ID是动态的，我不知道要捕获该值。

例如按钮具有下一个选项以选择： - 苹果（ID =部件0） - bannana（ID =元素1） - 胡萝卜（ID =在element2）

当我选择选项“bannana “我需要获得ID”element1“。

回答：

您可以在容器上使用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

以上是 如何从“ul”动态标签获得ID 的全部内容， 来源链接： utcz.com/qa/266540.html

回到顶部