使用jQuery隐藏动态添加的div

Question

以下jQuery代码将在页面加载时隐藏以-value-wrapper结尾的div。我的问题是，“添加更多值”按钮将附加另一行（编号递增）。当它这样做时，所有div都会被显示出来。有没有办法保持原始的div隐藏，并隐藏新集合中的那些div？HTML标记如下：

<div id="group-information-items">
    <fieldset>
        <legend>Member Information</legend>
        <label>Form label 1</label>
        <table>
            <tr>
                <td>
                <div class="form-radios">
                    <input type="radio" class="form-radio" checked="checked" value="0" name="gci[0][fa][value]" id="edit-gci-value-0"> A
                    <input type="radio" class="form-radio" value="1" name="gci[0][fa][value]" id="edit-gci-value-0">B 
                </div>

                <!-- This is the div that is hidden -->
                <div id="edit-gci-0-fa-list-value-wrapper" class="form-item">
                    <label>List: </label>
                    <textarea name="gci[0][fa_list][value]" rows="5" cols="60"></textarea>
                </div>

                </td>
            </tr>
        </table>

        <!-- WHEN THIS BUTTON IS CLICKED, A CLONE OF THE ROW ABOVE IS APPENDED TO THE TABLE -->
        <!-- THE ONLY DIFFERENCE IS [0] BECOMES [1] AND SO ON -->
        <div class="content-add-more clear-block">
            <input type="submit" value="Add more values" id="edit-gci-add-more" name="gci_add_more">
        </div>
    </fieldset>
</div>

以下是进行初始隐藏的代码：

$("#group-information-items div").each(function() {
        $("div[id$='-value-wrapper']").each(function() {
                        $(this).hide();
        });
});

- newbie-shame

---

我们可能需要查看添加更多值的代码。 - gnarf

问题似乎出在显示div的代码上。 - DA.

Answer 1

首先，除非我漏掉了什么，否则您可以大大简化该隐藏代码：

$("#group-information-items").find("div[id$='-value-wrapper']").hide();

这引出了一个问题。为什么不设置一个常规的静态样式，使得任何这些div的默认状态都是隐藏的呢？从实践角度来看，将默认样式与页面元素的默认逻辑状态对齐是有意义的。因此：

div#group-information-items div.form-item { display: none; }

现在所有“新”的div都将被隐藏。根据需要更改您的代码以show() divs（您还没有展示足够的内容，以了解何时、何地和何时执行此操作）。如果您想要附加行为到初始页面加载后创建的元素上，您应该查看live()或delegate()。

- Ken Redler

Answer 2

尝试在单击输入按钮时隐藏div：

  $("#edit-gci-add-more").click(function() {
             $("div[id$='-value-wrapper']").hide();
  });

- input