代码之家  ›  专栏  ›  技术社区  ›  dabadaba

jQuery:按选择器查找子体并按索引设置值

  •  1
  • dabadaba  · 技术社区  · 8 年前

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

    <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
    

    我做错了什么?

    2 回复  |  直到 8 年前
        1
  •  1
  •   Shubham Khatri    8 年前

    将输入包装在jquery选择器中,如 $(inputs[0]) 或者你可以使用 input[0].value 因为输入[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
  •  0
  •   Community CDub    8 年前

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

    当使用括号(如 inputs[0] )返回的是HTML节点元素,而不是jQuery对象。 尝试使用 inputs.eq(0) 它将在位置i返回jQuery对象,然后可以使用jQuery的 val()

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