Question

我有以下HTML格式：

<div class="product">
...
</div>
...
(n-th row elements)
<div class="product">
    <div class="control-group">
        <label>Name</label>
        <input type="text" value="T-Shirt Greenday" name="name[]">
    </div>
    <div class="control-group">
        <label>Quantity</label>
        <input type="text" value="3" name="quantity[]">
    </div>
    <div class="control-group">
        <a href="#" class="remove">Remove</a>
    </div>
</div>
...

如何从第n行获取输入字段并使用jquery序列化它们？（我试过这样的事情：parent().parent().siblings('.control-group').children(':input').serialize()，但没有成功）

感谢。

Answer 1

您可能正在从.remove事件处理程序调用此代码 - 但是您有一个.parent()调用太多，而是获取div.product。这个元素唯一可见的兄弟是div.product，并且它们没有:input个孩子 - 所以你最终得到一个空的jQuery对象，而且很难正确序列化。）

当然，您可以通过删除不需要的.parent()来解决此问题。但是，完全摆脱parent()链，将其替换为.closest()是有利的：

$('.remove').click(function() {
    var serializedRow = $(this).closest('.product').find(':input').serialize();
    console.log(serializedRow);
    // ...
    return false;
});

JSFiddle

此开关的关键优势是能够调整div.product的内部（例如，为控件组添加另一个包装器），而无需触及closest - 使用方法。此外，.closest(some_class)显示你的真实意图比.parent()的群体更清楚。）

仅序列化来自父div的一些输入字段

1 个答案: