如何使用 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">

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

`所以，根据你的问题，我了解到你想为每个元素提供 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]);

    })

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++) {

  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并将 ids 附加到 中的元素categories。然后它将元素打印到控制台，这样您就可以看到它们的 id 是如何设置的。