Назначить индекс пунктам по кол-ву input

Question

Есть список пунктов и input'ов. Каждый пункт это индекс инпута. Код сейчас добавляет пункты в порядке 0 1 2 3 4 5 6 7. А как бы сделать так, чтобы, где у инпута есть атрибут data-ckeck то индект дублировался и в итоге было бы так: 0 1 1 2 3 4 5 5 ?

for (let i = 0; i < $('input').length; i++) {

  $('ul').append('<li index="' + [i] + '">'+[i]+'</li>');
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input />
<input data-ckeck />
<input data-ckeck />
<input />
<input />
<input />
<input data-ckeck />
<input data-ckeck />
<ul>

</ul>

Answer 1

Этого можно добиться, если создать индикаторы (внешняя переменная) того, что у нас начинается повторение, добавив проверку на присутствие атрибута и установив индекс для получения верной разницы с учетом количества повторяющихся элементов с атрибутом. Я добавил еще внешнюю переменную point для вывода повторного индекса.

forEach для перебора элементов из коллекции узлов в querySelectorAll (можно добавить Array.from для поддержки IE) на обычном JS.

Добавлять DOM-элементы строкой - признак плохого кода, этого не стоит делать хотя бы ради удобства поддержки и возможности разбить строку.

let point,
minus = 0;

function addItem(ind , inner) {
  let li = document.createElement('li');
  li.setAttribute('index', ind);
  li.innerHTML = inner;
  document.querySelector('ul').append(li);
}

document.querySelectorAll('input').forEach( function (e, i) {
  
  let check = e.hasAttribute('data-check');

  if (check && point === undefined) {
    i = i - minus;
    addItem(i, i);
    point = i;
  }
  
  else if (check && point !== undefined) {    
    ++minus;
    addItem(point, point);
    
  } else {
    i = i - minus;
    point = undefined;
    addItem(i, i);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input data-check />
<input data-check />
<input data-check />
<input data-check />
<input data-check />
<input />
<input />
<input />
<input />
<input data-check />
<input data-check />
<input data-check />
<input data-check />
<input data-check />
<input />
<input />
<ul>

</ul>

Answer 2

Не знаю, актуален ли вопрос, но вот вариант на JS

const inputs = document.querySelectorAll('#inputs > input'), // Получаем все инпуты
      output = document.querySelector('ul');

let old = []; // Тут будем хранить старые записи
inputs.forEach(function(e, i) { // Проходим циклом по инпутам
  let count = old[1] + 1; // Новое значение это старый индекс + 1;
  if(i !== 0) { // Если инпут НЕ первый (индекс 0), то..
    if(e.hasAttribute('data-ckeck')
    && old[0].hasAttribute('data-ckeck')) // Проверяем наличие атрибута у текущего и предыдущего, если он есть, то от нового значения отнимаем 1, т.е. делаем его с таким же индексом как и предыдущий;
      count--;
  } else count = 0; // Если инпут первый (индекс 0), то выставляем счётчик на стартовое значение - 0.
  e.placeholder = count; // Для демо помечу ещё и инпуты
  output.innerHTML += `<li>${count}</li>`; // Добавляем в список
  old = [e, count]; // Перезаписываем старые данные.
})

<div id="inputs">
  <input />
  <input data-ckeck />
  <input data-ckeck />
  <input />
  <input />
  <input />
  <input data-ckeck />
  <input data-ckeck />
</div>

<ul>

</ul>

А вот на JQ, если удобнее с ним.

const inputs = $('#inputs > input'),
      output = $('ul');

let old = [];
inputs.each(function(i) {
  let count = old[1] + 1;
  if(i !== 0) {
    if($(this).is('[data-ckeck]')
    && $(old[0]).is('[data-ckeck]'))
      count--;
  } else count = 0;
  $(this).attr('placeholder', count);
  output.append(`<li>${count}</li>`);
  old = [$(this), count];
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="inputs">
  <input />
  <input data-ckeck />
  <input data-ckeck />
  <input />
  <input />
  <input />
  <input data-ckeck />
  <input data-ckeck />
</div>

<ul>

</ul>

БЛОГ НА HUSL

Назначить индекс пунктам по кол-ву input

Ответы (2 шт):