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

Question

I have these elements and I want to change the id's dynamically using the fetched id array via server which I have categories (Ex: ["category 1", "category 2","category 3","category 4","category 5", "category 6"] ). I don't know how to do this nothing seems to work.

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

Answer 1

If you want to change ids, you can use a for loop to iterate through the elements and change them.

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

The above iterates through the lis and attaches the ids to the elements in categories . Then it prints the element to the console so you can see how their ids have been set.

Answer 2

`So, from your question, I understand that you want to give each of the elements the id with the value in the fetched array.

So for the first <li> element, the id would be category 1 . If this is what you are asking for, the solution is to grab the required elements

<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]);
    })

Answer 3

I added new class to the elements and then changed the href this way

<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;
});