主页 / 问题 / 1405214
Accepted
hellokitViki
Asked:2022-06-30 04:32:13 +0800 CST2022-06-30 04:32:13 +0800 CST

按输入数量为项目分配索引

  • 772

有一个项目和输入列表。每个项目都是输入的索引。代码现在按 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>

javascript jquery

2 个回答

  1. 这可以通过创建我们开始重复的指标（外部变量）来实现，方法是添加对属性是否存在的检查并设置索引以在给定具有该属性的重复元素的数量的情况下获得正确的差异。我添加了另一个外部变量point来显示重新索引。

    forEach在纯 JS中迭代 querySelectorAll 中的节点集合中的元素（可以添加Array.fromIE 支持）。

    内联添加 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>

    • 1
  2. Best Answer

    我不知道这个问题是否相关，但这里是 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>

    • 1

相关问题