jquery 是否有办法知道触发事件的元素数量?

vbopmzt1  于 2023-02-03  发布在  jQuery
关注(0)|答案(1)|浏览(142)

好的,我正在尝试弄清楚如何获得一组动态添加到DOM的输入的确切数量,以便稍后用来自模态中的数据库的数据填充它们,因此逻辑是当用户从模态中选择数据时,所选数据将填充用户所在的输入。
这是我的密码。

var numeroDeInput = 0; 
// crea row con los inputs de materia prima $('#materiaPrima').click(function(e) { numeroDeInput = $('.material').length; var tableRow = `
<div class="rowCreated d-flex gap-2 my-2">
  <input type="text" placeholder="Material" class="material form-control buscarMaterial" name="material[]" \>
  <input type="number" placeholder="Medida 1" readonly class=" medida_uno form-control" name="medida_uno[]" \>
  <input type="number" placeholder="Medida 2" readonly class=" medida_dos form-control" name="medida_dos[]" \>
  <input type="number" placeholder="Largo" id="largo" class="form-control calcular" name="largo[]" \>
  <input type="number" placeholder="Ancho" id="ancho" class="form-control calcular" name="ancho[]" \>
  <input type="number" placeholder="Alto" id="alto" class="form-control calcular" name="alto[]" \>
  <input type="number" placeholder="Precio" readonly class="precio form-control" name="precio[]" \>
  <input type="number" placeholder="Subtotal" step=".01" readonly class="subtotal form-control" name="subtotal[]" \>
  <button type="button" class="btn btn-sm btn-danger py-0 removeRow"><i class="bi bi-x fs-3"></i></button>
</div>` $('.tableBody').append(tableRow); console.log(numeroDeInput); });
enter code here
c6ubokkw

c6ubokkw1#

你可以给每个数字输入域添加一个eventlistener,当它被触发时,只需遍历所有的数字输入域,并计算索引直到匹配为止。
为了演示的目的,我添加了一个信息div,它显示单击数字字段时的信息。
我使用了普通的Javascript,因为我不再使用jQuery了。

const numberSelector = 'input[type="number"]';
const info = document.getElementById('info');
document.querySelectorAll(numberSelector).forEach(
        number => number.addEventListener('click', input => {
            let index = 0;
            const inputs = document.querySelectorAll(numberSelector);
            while (index < inputs.length) {
                if (inputs[index] === input.target) {
                    info.innerText = `Index: ${index} Placeholder: ${input.target.placeholder}`;
                    break;
                }
                index++;
            }
        })
);
<div class="rowCreated d-flex gap-2 my-2">
    <input type="text" placeholder="Material" class="material form-control buscarMaterial" name="material[]" \>
    <input type="number" placeholder="Medida 1" readonly class=" medida_uno form-control" name="medida_uno[]" \>
    <input type="number" placeholder="Medida 2" readonly class=" medida_dos form-control" name="medida_dos[]" \>
    <input type="number" placeholder="Largo" id="largo" class="form-control calcular" name="largo[]" \>
    <input type="number" placeholder="Ancho" id="ancho" class="form-control calcular" name="ancho[]" \>
    <input type="number" placeholder="Alto" id="alto" class="form-control calcular" name="alto[]" \>
    <input type="number" placeholder="Precio" readonly class="precio form-control" name="precio[]" \>
    <input type="number" placeholder="Subtotal" step=".01" readonly class="subtotal form-control" name="subtotal[]" \>
    <button type="button" class="btn btn-sm btn-danger py-0 removeRow"><i class="bi bi-x fs-3"></i></button>
    <div id="info"></div>
</div>

相关问题