jQuery：on change得到最接近的元素？

Question

I'm trying to use jquery to get the closest element to an input field so I can use the element's text/html as the value of the input field.

my jquery looks like this:

<script>
jQuery("[name=currencies]").val(Currency.currentCurrency).change(function() {

 $(".moneyPrice").val($(this).closest('.mypro').find($("span.money").text()));

});
</script>

the span.money is being created dynamically.

and my HTML looks like this:

<div align="center" class="mypro" style="position:relative; width:270px; height:570px; border:solid 1px #CCC; margin:10px; float:left; overflow:hidden; padding:5px;">

<a class="overlay" href="product.php"></a>

<!--<a class="overlayBtns" href="">Quick View</a>-->

<a class="overlayAdd" href="javascript:{}" onclick="form'.$id.'.submit();"><i class="fa fa-shopping-cart"></i>
Add To Basket</a>


<img width="100%" src="product_images/'.$id.'Image1.jpg" alt=""  />


<p style="padding:2px;">'.$product_name.'</p>
<p style="padding:2px;">'.$manu.'</p>

    <div style="padding:5px;" class="price">

      <div class="prod-price"><span class=money>£'.$price.'.00</span></div>

        <form id="form'.$id.'" name="form1" method="post" action="cart.php">
        <input type="hidden" name="pid" id="pid" value="'.$id.'" />
        <input type="text" name="" class="moneyPrice" value="" />
      </form>   
    </div>

</div>

the HTML code above also, created dynamically using PHP.

so basically, when the select option changes, my jquery code fires up. But I get this in my input field [object object].

if I change my jquery code to this:

$(".moneyPrice").val($("span.money").text());

it will display the span.money text in my input fields but the issue is that it will display ALL of the dynamically created span.money texts in all the input fields.

So for that reason, I need to get the closest span.money, to .moneyPrice input field and then display the span.money into the closest .moneyPrice input field.

Sorry if this is a bit confusing and I hope I get some help from yo guys.

any help would be appreciated.

EDIT:

<select id="currencies" name="currencies">


   <option value="GBP" selected="selected">GBP</option>
  <option value="USD" >USD</option>


    <option value="NGN">NGN</option>







    <!--<option value="AUD">AUD</option>



    <option value="SGD">SGD</option>-->



    <option value="EUR">EUR</option>


</select>

EDIT:

i have created a working jsfiddle so you can see the issue:

http://jsfiddle.net/v6v146sv/

Answer 1

Your syntax isn't quite right , likely as a result of trying to do too much in one line

$(".moneyPrice").val($(this).closest('.mypro').find($("span.money").text()));

Should be

$(".moneyPrice").val($(this).closest('.mypro').find("span.money").text());

Note that your find() would be the same as

var txt = $("span.money").text();// is not a selector
find(txt) // returns jQuery object not a text value but `txt` isn't a valid selector either