Javascript 获取同级文本输入值

我有下面的HTML

           <li class='user_attributes'><b>username: </b>{{username}}
                <input class='user_input form-control edit_fields {{_id}}' id='username_field' type="text" name='username' placeholder="username">
                <button type="submit" class="btn btn-default submit_button edit_fields {{_id}}" id='update_username'>update</button>
          </li>

编辑

这是Im使用的框架（Meteor.js）的一个问题，“this”的范围

$(document).ready(function(){
    $('#update_username').on('click',function(ev, template){
        ev.preventDefault();

        // var username_field = template.$('input[id="username_field"]').val();

        // var username_field = $(ev.target).find('[name = message]').val();

          var input_field = $(this).closest('li').find('input').val();

        console.log(input_field);

        // Meteor.call('updateUsername', this._id, username_field);

    });
});

不要在同级函数中放入不必要的jquery对象。您的选择器正在返回每个兄弟姐妹

$('button').siblings('input')  //Returns 1 element

不一样

$(this).siblings($('input[id="username_field"]'))   //Returns 2 element

---

请参见

我不确定您是否想要这个，但请尝试一下：

$（“#更新_用户名”）。单击（函数（）{
var test=$（“#用户名_字段”）.val（）
警报（测试）
});

用户名：{{username}
更新
仍然未定义如果您的HTML有效，则此操作应该有效。差异：$（this）.sibbines（'input'）；是的。结果是一样的，因为OPs输入有一个ID username\u字段。
$('button').siblings('input')  //Returns 1 element

$(this).siblings($('input[id="username_field"]'))   //Returns 2 element