javascript - 查找容器中没有id的元素

Question

我正在向动态创建的 div 添加几个输入字段。目前，我根据当前增量给他们上课。结果看起来像这样(简化):

<div class="container">
    <input type="text" class="c_1"/>
    <input type="text" class="c_2"/>
</div>

<div class="container">
    <input type="text" class="c_1"/>
    <input type="text" class="c_2"/>
    <input type="text" class="c_3"/>
</div>

我通过执行以下操作将数据映射到元素:

$container.find('.c_' + id).val(value);

其中 $container 是迭代中的当前容器 div。

由于每个 div 中最多可以有 100 个输入元素，我想知道从性能 Angular 来看这是否是一个好的解决方案。通过 HTML5 数据属性定位元素会更快吗？或者我应该尝试不同的方法？目前，旧版浏览器中的映射速度相当慢。

Answer 1

如果您知道容器的所有子元素都是您感兴趣的输入元素，则可以使用

访问一个元素

var input = $container.children[17];

这应该比搜索特定类(class)的 child 快得多。你甚至可以考虑完全放弃类(class)。

jQuery: 如果 $container 是一个 jQuery 对象 - 它看起来就是这样 - 你必须使用类似的东西

var input = $container.get().children[17];

直接访问 DOM 元素

JsPerf:我做了一个小jsPerf将 JS .children 与 jQuery find 进行比较，这表明它实际上更快。