javascript - 将文本从多个 div 复制到多个输入值

Question

我有一个页面，其中列出了许多产品。这些产品中的每一个都位于 div 内，并具有如下形式:

<form class="cart" method="post" enctype="multipart/form-data">
    <input type="hidden" name="add-to-cart" value="">
    <button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
</form>

如您所见，“添加到购物车”的值(value)缺失。

在表单所在的同一个 div 中，我们还有一个像这样的另一个 div，其中包含产品的 ID(例如 IDPRODUCT)，需要将其放入值中:

<div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">IDPRODUCT</div>

我需要一个 javascript 函数，在文档就绪(？)或鼠标悬停在 div 上时搜索 div 内的值，例如 IDPRODUCT，并将该值复制到输入 name="add-to-cart"的值中

当然，对于每个不同的 div 都应该有正确的 IDPRODUCT。

这是我尝试过的一个 JSFiddle，但它似乎不起作用:JSFiddle

知道如何解决这个问题吗？非常感谢

Answer 1

更新

再次查看完整示例

$('.cart-add-wrapper').each(function(){
    var id = $(this).find('.vc_gitem-woocommerce-product-id').text();
    $(this).find('input[name=add-to-cart]').val(id);
    console.log("id", id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-add-wrapper">
    <form class="cart" method="post" enctype="multipart/form-data">
        <input type="hidden" name="add-to-cart" value="">
        <button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
    </form>
    <div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">4321</div>
</div>
<div class="cart-add-wrapper">
    <form class="cart" method="post" enctype="multipart/form-data">
        <input type="hidden" name="add-to-cart" value="">
        <button type="submit" class="single_add_to_cart_button button">Add to Cart</button>
    </form>
    <div class="vc_gitem-woocommerce vc_gitem-woocommerce-product-id hideidfromcart vc_gitem-align-left">1234</div>
</div>