jQuery:通过选择器查找后代,并通过索引设置值
jQuery: find descendants by selector and set value by index
假设我有以下表示足球比赛输入的结构:
<form>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
</form>
我想随机填充每个输入,但每对必须不同
这就是我要做的:
$('form .match .scores').each(function () {
var inputs = $(this).find('input[type=text]');
// generate scores...
inputs[0].val(score1);
inputs[1].val(score2);
});
我不知道我错过了什么,因为当尝试填充第一个输入时,控制台报告以下错误:
Uncaught TypeError: inputs[0].val is not a function
我做错了什么?
将您的输入包装在像$(inputs[0])
这样的jquery选择器中,或者您可以使用input[0].value
,因为input[0]是一个dom元素。
$(function(){
$('form .match .scores').each(function () {
var inputs = $(this).find('input[type=text]');
console.log(inputs);
$(inputs[0]).val(score1);
$(inputs[1]).val(score2);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
<div class="match">
<div class="scores">
<input type="text">
<input type="text">
</div>
</div>
</form>
我今天实际上回答了一个非常类似的问题:jQuery .each()函数通过索引访问其他选择器
当使用括号调用jquery数组对象时(如inputs[0]
),您将返回HTML节点元素,而不是jquery对象。尝试使用inputs.eq(0)
,它将返回位置i的jQuery对象,然后你可以使用jQuery的val()
有关eq的更多信息,请参阅jQuery文档:https://api.jquery.com/eq/
给定一个表示一组DOM元素的jQuery对象,.eq()方法从该集合中的一个元素构造一个新的jQuery对象。提供的索引标识该元素在集合中的位置。
相关文章:
- 如何设置元素的z索引?JQuery、Javascript、CSS、HTML
- 选择的索引未设置,除非显示警报
- 设置自定义覆盖和多边形的任意z索引顺序
- 使用CasperJS将值设置为按索引下拉
- 如何在ng-options中添加两个索引,并使用Angular.js动态设置值
- 如何确定元素的 z 索引,即使它们设置为自动
- 使用 JS 动态设置 z 索引
- 以编程方式获取和设置 JavaScript 中 jssor 的索引
- 使用 jQuery 根据索引设置表单元格值
- 如何将工具提示 z 索引设置为大于剑道网格标题
- ngModel 使用索引器时“无法设置未定义的属性”
- 如何在目录中设置路径“/”指向索引.html的简单静态服务器
- 设置空数组索引
- 通过索引设置数组对象的值会设置所有数组项
- 从express 4中的路由/索引设置模板变量
- JavaScript 根据索引设置 URL
- EmberJS -基于索引设置活动
- jQuery:通过选择器查找后代,并通过索引设置值
- javascript中的动态索引设置
- 如何按行和列索引设置单元格的值