如何使用 jQuery 计算相同类别的元素数量？

javascript

2024-03-16 18:22:52

用 jQuery 计算相同类别的元素数量

问题分析

设想我们有一个场景，用户可以动态地添加具有相同类的元素。要管理这些元素，我们需要计算它们的数量，并基于此计数来更新表单元素的名称。然而，我们不确定如何使用 jQuery 或 JavaScript 来实现这一目标。

解决方案

我们将分步解决这个问题，涵盖从元素选择到动态更新表单名称的各个方面。

1. 选择具有相同类的元素

使用 jQuery 的 find() 方法，我们可以轻松选择页面中具有相同类的所有元素：

const elements = $('.class-name');

2. 计算元素数量

jQuery 提供了一个称为 length 的属性，它返回所选元素的计数：

const count = elements.length;

3. 将计数添加到表单名称

在元素添加事件处理程序中，我们可以利用计数来更新表单名称：

$('span').on('click', function() {
  const input = $(this).siblings('input');
  const newName = `name="whatever(${count + 1})"`;
  input.attr('name', newName);
});

完整的代码示例

<span>Add an element</span>

<input type="text">

const elements = $('.class-name');
const count = elements.length;

$('span').on('click', function() {
  const input = $(this).siblings('input');
  const newName = `name="whatever(${count + 1})"`;
  input.attr('name', newName);
});