Как передать .val() по клику в input?

Question

[Дима Самсонов]

Есть несколько блоков и инпут:

<div class="block-info">
            <span class="block-food">Сосиска в тесте</span>
            <button class="block-btn">Заказать</button> 
       </div>

       <div class="block-info">
            <span class="block-food">Сосиска без теста</span>
            <button class="block-btn">Заказать</button> 
       </div>

       <input class="out" type="text">

Нужно сделать так, чтобы при нажатии на .block-btn в input.out подтягивался контент соседнего span.block-food.

Написал такой код, но он не работает:

$('.block-info').on('click', '.block-btn' function(){
    var info = $(this).find('.block-food').val();
    $('.out').val(info).html('заказать')
})

Answer 1

[TheRevan]

$('.block-btn').click(function(){
  var info = $(this).closest('.block-info').find('.block-food').text();
  $('.out').val(info);
})

Answer 2

[Павел Новиков]

Тебе нужно использовать свойство .parent():

$(document).ready(function() {
$('.block-btn').on('click', function() {
var text = $(this).parent().find('.block-food').text();
$('.out').val(text);
});
});

https://jsfiddle.net/o2gxgz9r/28173/

Answer 3

[Nick Sdk]

$('.block-btn').on('click', function(){
	var food = $(this).parent().find('.block-food').text();
  // или так
  // var food = $(this).prev().text();
  $('.out').val(food);
  // или со словом "заказать"
  // $('.out').val(food + ' (заказать)');
});

https://jsfiddle.net/ep4tareh/