Jquery - 单击按钮时将表单上方的元素添加到另一个 div

Question

当单击button.additem 时，我尝试将表单上方的div (.item_desc) 删除到侧边栏。表单的所有处理都将是 php/ajax，我只需要购物车中商品的可视化表示，因为页面不会刷新。

表单和 div

    <div class="item">      
        <div class="item_desc">
            Item 1<br>
            Item 1 Desc
        </div>
        <form method="post">
            <button type="submit" name="submit" class="additem">Add To Cart</button>
            <input type="hidden" name="id" value="">
            <input type="hidden" name="name" value="">
            <input type="hidden" name="qty" value="">
            <input type="hidden" name="desc" value="">
            <input type="hidden" name="price" value="">
            <input type="hidden" name="img" value="">
        </form>
    </div>

Jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
    $('.additem').click(function(e) {
        $(this).closest('.item_desc').appendTo('#sidebar')
    });

});
</script>

不太清楚我做错了什么，尝试使用parent()选择器和其他一些东西。任何帮助或更好的方法将不胜感激。

Answer 1

closest 选择元素最接近的匹配父元素。目标元素是父 form 元素的同级元素:

$(this).closest('form') // get the closest parent form element 
       .siblings('.item_desc') // get the sibling of the form element
       .appendTo('#sidebar');

您还有其他几个选项，例如:

$(this).closest('.item') // get the closest `.item` parent/ancestor
       .children('.item_desc') // get the `.item_desc` children  
       .appendTo('#sidebar');

另请注意，您应该使用 event 对象的 .preventDefault() 方法或通过返回虚假值(return false) 在处理程序中。