使用jquery隐藏动态添加的div

问题描述：

下面的jquery代码将隐藏加载页面时以-value-wrapper结尾的div。我的问题是，“添加更多值”按钮将追加另一行（数字递增）。当它发生时，所有的div都会显示出来。有没有办法保留原始图像并将它们隐藏在新图像中？使用jquery隐藏动态添加的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(); 
     }); 
});

我们可能需要查看添加更多值的代码。 – gnarf 2010-07-27 20:51:36

这个问题似乎与显示div的代码有关。 – 2010-07-27 21:02:15

答

首先，除非我遗漏了一些东西，否则可以大大简化隐藏代码：

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

虽然这引发了问题。为什么不设置常规静态样式，以便隐藏这些div的默认条件？作为一种惯例，将默认样式与页面元素的默认逻辑状态对齐是有意义的。所以：

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

现在所有“新”divs将被隐藏。根据需要将您的代码更改为show() div（您尚未显示足够的数据以了解如何，在何处以及何时执行此操作）。如果您要将行为附加到初始页面加载后创建的元素上，则应该查看live()或delegate()。

答

试图隐藏输入按钮的点击的div：

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

使用jquery隐藏动态添加的div

相关推荐