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

【问题标题】：jQuery: find descendants by selector and set value by indexjQuery：通过选择器查找后代并通过索引设置值
【发布时间】：2016-09-28 19:19:25
【问题描述】：

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

<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] 返回 DOM 节点，而不是 jQuery 集。使用inputs[0].value = score1; 或inputs.eq(0).val(score1)

标签： javascript jquery

【解决方案1】：

将您的输入包装在像 $(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>

【讨论】：

【解决方案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 对象。提供的索引标识该元素在集合中的位置。

【讨论】：