Question

假设我有以下结构代表足球比赛的输入：

<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

我做错了什么？

Answer 1

将输入包装在$(inputs[0])等jquery选择器中，或者您可以使用input[0].value，因为input [0]是dom元素。

＆＃13;

$(function(){

$('form .match .scores').each(function () {
    var inputs = $(this).find('input[type=text]');
    console.log(inputs);
    
    $(inputs[0]).val(score1);
    $(inputs[1]).val(score2);
});
  
})

＆＃13;

<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>

＆＃13;

Answer 2

我今天回答了一个非常相似的问题： jQuery .each() function accessing other selector via indexes

使用括号（如inputs[0]）调用jquery数组对象时，您将返回一个HTML节点元素，而不是jQuery对象。尝试使用inputs.eq(0)将返回位置i的jQuery对象，然后你可以使用jQuery的val()

有关eq的更多信息，请参阅jQuery文档：https://api.jquery.com/eq/

给定一个表示一组DOM元素的jQuery对象，.eq（）方法从该集合中的一个元素构造一个新的jQuery对象。提供的索引标识该元素在该集合中的位置。

jQuery：通过选择器查找后代并按索引设置值

2 个答案: