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

Question

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

<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

`所以，根据你的问题，我了解到你想为每个元素提供 id 和获取的数组中的值。所以对于第一个<li>元素，id 将是category 1。如果这是您要的，解决方案是获取所需的元素<div id="parent">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li role="presentation" class="active categories"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">ALL</a></li>&nbsp; &nbsp; &nbsp; <li role="presentation" class="categories"><a href="#chicken" aria-controls="chicken" role="tab" data-toggle="tab">CHICKEN</a></li>&nbsp; &nbsp; &nbsp; <li role="presentation" class="categories"><a href="#fish" aria-controls="fish" role="tab" data-toggle="tab">FISH</a></li>&nbsp; &nbsp; &nbsp; <li role="presentation" class="categories"><a href="#turkey" aria-controls="turkey" role="tab" data-toggle="tab">TURKEY</a></li>&nbsp; &nbsp; &nbsp; <li role="presentation" class="categories"><a href="#miscellenous" aria-controls="miscellenous" role="tab" data-toggle="tab">MISCELLANOUS</a></li>&nbsp; &nbsp; &nbsp; <li role="presentation" class="categories"><a href="#frozen" aria-controls="last" role="tab" data-toggle="tab">LAST</a></li>&nbsp; &nbsp; </ul>&nbsp; </div>let fetchedArray = ['cat1','cat2','cat3','cat4','cat5','cat6'];&nbsp; &nbsp; $('li').each((i,el) => {&nbsp; &nbsp; &nbsp; $(el).attr('id',fetchedArray[i]);&nbsp; &nbsp; })

Answer 2

`所以，根据你的问题，我了解到你想为每个元素提供 id 和获取的数组中的值。所以对于第一个<li>元素，id 将是category 1。如果这是您要的，解决方案是获取所需的元素<div id="parent">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li role="presentation" class="active categories"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">ALL</a></li>&nbsp; &nbsp; &nbsp; <li role="presentation" class="categories"><a href="#chicken" aria-controls="chicken" role="tab" data-toggle="tab">CHICKEN</a></li>&nbsp; &nbsp; &nbsp; <li role="presentation" class="categories"><a href="#fish" aria-controls="fish" role="tab" data-toggle="tab">FISH</a></li>&nbsp; &nbsp; &nbsp; <li role="presentation" class="categories"><a href="#turkey" aria-controls="turkey" role="tab" data-toggle="tab">TURKEY</a></li>&nbsp; &nbsp; &nbsp; <li role="presentation" class="categories"><a href="#miscellenous" aria-controls="miscellenous" role="tab" data-toggle="tab">MISCELLANOUS</a></li>&nbsp; &nbsp; &nbsp; <li role="presentation" class="categories"><a href="#frozen" aria-controls="last" role="tab" data-toggle="tab">LAST</a></li>&nbsp; &nbsp; </ul>&nbsp; </div>let fetchedArray = ['cat1','cat2','cat3','cat4','cat5','cat6'];&nbsp; &nbsp; $('li').each((i,el) => {&nbsp; &nbsp; &nbsp; $(el).attr('id',fetchedArray[i]);&nbsp; &nbsp; })

Answer 3

如果要更改 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++) {&nbsp; let el = document.getElementsByTagName("li")[i];&nbsp; el.id = categories[i];&nbsp; 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">&nbsp; <a href="#frozen" aria--->上面的代码遍历了lis并将 ids 附加到 中的元素categories。然后它将元素打印到控制台，这样您就可以看到它们的 id 是如何设置的。