主页 / 问题 / 844283
Accepted
Анатолий
Asked:2020-06-20 16:50:10 +0000 UTC2020-06-20 16:50:10 +0000 UTC

如何根据它们的数量计算和更改所有元素 id 从 0 到 X

  • 772

有这样的代码。

  <span class="condition_boxcontent">
  
      <div class="condition_box">
          <h1>Вариант - 1 <span class="del_condition_box">Удалить</span></h1>
      </div>

      <div class="condition_box">
          <h1>Вариант - 2 <span class="del_condition_box">Удалить</span></h1>
      </div>

      <div class="condition_box">
          <h1>Вариант - 10 <span class="del_condition_box">Удалить</span></h1>
      </div>

      <div class="condition_box">
          <h1>Вариант - 22 <span class="del_condition_box">Удалить</span></h1>
      </div>
      
  </span>

如何更改 h1 的内容以使数字按顺序排列？

即condition_box类有4个div，也就是说h1中的编号应该是这样的。选项 - 1，选项 - 2，选项 - 3，选项 - 4

javascript

3 个回答

  1. Best Answer

    在类包装器中包装变体编号 → 迭代这些元素，将它们的内容更改为 index + 1。

    const nums = [...document.querySelectorAll('.condition_box__num')]

nums.forEach((num, index) => num.innerHTML = ++index)
    <span class="condition_boxcontent">
      <div class="condition_box">
          <h1>Вариант - <span class="condition_box__num">1</span> <span class="del_condition_box">Удалить</span></h1>
      </div>

      <div class="condition_box">
          <h1>Вариант - <span class="condition_box__num">3</span> <span class="del_condition_box">Удалить</span></h1>
      </div>

      <div class="condition_box">
          <h1>Вариант - <span class="condition_box__num">5</span> <span class="del_condition_box">Удалить</span></h1>
      </div>

      <div class="condition_box">
          <h1>Вариант - <span class="condition_box__num">12</span> <span class="del_condition_box">Удалить</span></h1>
      </div>
</span>

    • 2

  2. 无需像这样更改 html 结构。但是将数字包含在某些东西中要容易得多，就像在下一个答案中一样。

    $("h1").each(function(idx,v ){
    var span = $(this).children("span");
    $(this).text("Вариант " + (idx + 1))
           .append(span);   
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="condition_boxcontent">
  
      <div class="condition_box">
          <h1>Вариант - 1 <span class="del_condition_box">Удалить</span></h1>
      </div>

      <div class="condition_box">
          <h1>Вариант - 2 <span class="del_condition_box">Удалить</span></h1>
      </div>

      <div class="condition_box">
          <h1>Вариант - 10 <span class="del_condition_box">Удалить</span></h1>
      </div>

      <div class="condition_box">
          <h1>Вариант - 22 <span class="del_condition_box">Удалить</span></h1>
      </div>
      
  </span>

    原则上这样的编号可以使用 css 来完成

    • 1

  3. 用 css 计数器编号。当一个元素被删除时，它会被更新。

    $('.del_condition_box').click(function(){
  $(this).parents('.condition_box').remove();
})
    h2{
  margin:0 1em 0 0;
  font-size:25px;
  display:inline-block;
}
.condition_boxcontent{
  counter-reset:conditions;
}
.condition_box h2:after{
  counter-increment:conditions;
  content:' - ' counter(conditions);
}
.del_condition_box{
  display:inline-block;
  color:red;
  cursor:pointer;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="condition_boxcontent">
  <div class="condition_box">
    <h2>Вариант</h2>
    <span class="del_condition_box">Удалить</span>
  </div>
  <div class="condition_box">
    <h2>Вариант</h2>
    <span class="del_condition_box">Удалить</span>
  </div>
  <div class="condition_box">
    <h2>Вариант</h2>
    <span class="del_condition_box">Удалить</span>
  </div>
  <div class="condition_box">
    <h2>Вариант</h2>
    <span class="del_condition_box">Удалить</span>
  </div>
  <div class="condition_box">
    <h2>Вариант</h2>
    <span class="del_condition_box">Удалить</span>
  </div>
</div>

    • 1

相关问题