0

Есть такой код.

  <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 чтобы числа ишли по порядку?

То есть есть 4 div с классом condition_box значит нумерация в h1 должна бить такая. Вариант - 1, Вариант - 2, Вариант - 3, Вариант - 4

3 ответа 3

2

Поместить номера вариантов в обертку с классом → итерировать по этим элементам, меняя их содержимое на индекс + 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>

1

без изменения структуры 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

Нумерация при помощи 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.