javascript - 如何获取类中的所有字段

Question

我有多个类，其中包含不同数量的字段，1 个类示例:

<div class="row form-row-extra-phone spacer">
        <div class="col-12">
            <div class="input-group">
                <input type="tel" name="extraPhone-0-phone_number" class="form-control" placeholder="Extra Phone Number" maxlength="128" id="id_extraPhone-0-phone_number">
                <div class="input-group-append">
                     <a class="btn btn-success btn-circle btn-sm add-form-row" href="#" role="button" id="plus_payment_data">+</a>
                </div>
            </div>
        </div>
</div>

我想迭代具有属性 "name"和 "id"的类内的所有字段，并将 1 添加到内部的数字(在示例中 name="extraPhone-0-phone_number" -> name="extraPhone-1-phone_number")

我可以通过以下方式选择类(class): $('.form-row-extra-phone')

如何迭代其内部包含属性“name”和“id”的所有字段？

Answer 1

我假设你的意思是<div class="row form-row-extra-phone spacer">当您谈论class时？这是element ，不是一个类。

类可能是一个有问题的术语，因为它可以指 CSS/DOM 类或 Javascript 类，它们完全不相关。

如果你有<div class="something">然后something是一个 CSS/DOM 类，但整个东西不是那个类，而是一个 element 拥有该类(class)。

现在还有您提到的fields也只是element s。

所以你想要的是选择具有类 form-row-extra-phone 的所有元素其中所有后代元素都具有 name属性。这很容易。基本上在 CSS 选择器中 (空格)是后代元素的选择器。

所以你可以选择.form-row-extra-phone [name] .

所以你可能想要的是这样的:

document.querySelectorAll('.form-row-extra-phone [name]')
  .forEach(elem => elem.name.replace(/[0-9]/, x => Number(x) + 1));