如何自动更新子输入jQuery

迷你弓箭手

嗨，我正在尝试使用jquery自动更新围绕contenteditable div包裹的输入字段。后端代码生成了多个这样的div，我希望每个输入仅在其父级的div的contenteditable已更新时才进行更新。html看起来像这样：

<div class="to-change" contenteditable="true">
    Text that can be edited
    <input name="autoupdate">
</div>

我尝试使用以下jQuery代码：

<script>
    $( document ).ready(function() {
        console.log( "ready!" );
        $('.to-change').on("keyup", function() {
            var input = $(this).text()
            $('input:first-child').val(input)
        })
    });
</script>

问题是，当我尝试更改文本时，所有其他此类div的输入字段也将使用相同的文本进行更新。如何更改jquery代码，以使输入字段始终引用其父div的引用？

谢谢！

Re9iNee

您可以这样选择该元素：

$(document).ready(function () {
                console.log("ready!");
                $('.to-change').on("keyup", function () {
                    var input = $(this).text()
                    $('.to-change > :first-child').val(input);
                });
    })

要么：

$(document).ready(function () {
                console.log("ready!");
                $('.to-change').on("keyup", function () {
                    var input = $(this).text()
                    $('.to-change > input').val(input);
                });
    })