如何使用ID的数组动态更改href属性？

问题描述

我有这些元素，我想通过我具有类别（例如：["category 1","category 2","category 3","category 4","category 5","category 6"]）的服务器使用获取的ID数组动态更改ID。我不知道该怎么做，似乎没有任何作用。

<li role="presentation" class="active categories"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">ALL</a></li>
                <li role="presentation" class="categories"><a href="#chicken" aria-controls="chicken" role="tab" data-toggle="tab">CHICKEN</a></li>
                <li role="presentation" class="categories"><a href="#fish" aria-controls="fish" role="tab" data-toggle="tab">FISH</a></li>
                <li role="presentation" class="categories"><a href="#turkey" aria-controls="turkey" role="tab" data-toggle="tab">TURKEY</a></li>
                <li role="presentation" class="categories"><a href="#miscellenous" aria-controls="miscellenous" role="tab" data-toggle="tab">MISCELLANOUS</a></li>
                <li role="presentation" class="categories"><a href="#frozen" aria-

解决方法

如果要更改id，可以使用for循环遍历元素并进行更改。

const categories = ["category 1","category 2","category 3","category 4","category 5","category 6"];
for (var i = 0; i < document.getElementsByTagName("li").length; i++) {
  let el = document.getElementsByTagName("li")[i];
  el.id = categories[i];
  console.log(el);
}

<li role="presentation" class="active categories"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">ALL</a></li>
<li role="presentation" class="categories"><a href="#chicken" aria-controls="chicken" role="tab" data-toggle="tab">CHICKEN</a></li>
<li role="presentation" class="categories"><a href="#fish" aria-controls="fish" role="tab" data-toggle="tab">FISH</a></li>
<li role="presentation" class="categories"><a href="#turkey" aria-controls="turkey" role="tab" data-toggle="tab">TURKEY</a></li>
<li role="presentation" class="categories"><a href="#miscellenous" aria-controls="miscellenous" role="tab" data-toggle="tab">MISCELLANOUS</a></li>
<!--
<li role="presentation" class="categories">
  <a href="#frozen" aria-
-->

以上内容遍历lis，并将ID附加到categories中的元素上。然后它将元素打印到控制台，以便您可以查看其ID的设置方式。

,

`因此，从您的问题开始，我了解到您想为每个元素赋予ID，并在获取的数组中提供值。

因此，对于第一个<li>元素，其ID为category 1。 如果这是您要的，解决方案是获取必需的元素

<div id="parent">
    <ul>
      <li role="presentation" class="active categories"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">ALL</a></li>
      <li role="presentation" class="categories"><a href="#chicken" aria-controls="chicken" role="tab" data-toggle="tab">CHICKEN</a></li>
      <li role="presentation" class="categories"><a href="#fish" aria-controls="fish" role="tab" data-toggle="tab">FISH</a></li>
      <li role="presentation" class="categories"><a href="#turkey" aria-controls="turkey" role="tab" data-toggle="tab">TURKEY</a></li>
      <li role="presentation" class="categories"><a href="#miscellenous" aria-controls="miscellenous" role="tab" data-toggle="tab">MISCELLANOUS</a></li>
      <li role="presentation" class="categories"><a href="#frozen" aria-controls="last" role="tab" data-toggle="tab">LAST</a></li>
    </ul>
  </div>




let fetchedArray = ['cat1','cat2','cat3','cat4','cat5','cat6'];
    $('li').each((i,el) => {
      $(el).attr('id',fetchedArray[i]);
    })

,

我向元素添加了新类，然后以这种方式更改了href

<a class="category-text" href="#chicken" aria-controls="chicken" role="tab" data-toggle="tab">CHICKEN</a>

var new_id = [];var category_name =[];
for(i in categories){
    new_id[i] = categories[i].id;
    category_name[i] = categories[i].name;
}

var i = 0;var new_name;
$(".category-text").each(function(i){
    new_name = '#' + new_id[i];
    $(this).attr('href',new_name);
    $(this).text(category_name[i]);
    i=i+1;
});