Javascript jquery分离重新显示div内容时遇到问题

我很难理解jquery detach，好吧，detach部分还可以，我遇到了一个问题，它正在恢复内容。基本上，我有基于复选框选择显示的div，它们是基于第n行的交替样式，所以主要问题是，当一行被隐藏时，它在技术上仍然存在，因此样式不能正确地交替。我发现jQueryDetach正在为我的第n行问题寻找解决方案，这似乎是正确的方向，但我是新手，遇到了麻烦。以下是我的javascript：

$(document).ready(function () {

$(".classes input[type='checkbox']").click(function(e) {
       var innerTextHTML = $(this).parent("div.selection").children('label').text();
       var planWrap = $("div.plan."+innerTextHTML).parent();

       var detachedContent = $("div.plan."+innerTextHTML).parent();

       if ($(this).is(':checked')){
             planWrap.show();
             detachedContent.appendTo('div.plans-container');
       }else{
             planWrap.detach();
       }
});
});

现在，当我取消选中要筛选的框时，行以样式正确显示，但当我重新选中该框时，我的div不会返回。谢谢你能提供的任何帮助

编辑：添加HTML片段：

复选框代码：

<div class="speeds" id="int_div_id">
          <h4>Speeds:</h4>
          <div class="checks">
            <div class="selection">
              <input type="checkbox" id="10" name="chkSpeedType" value="10" checked="checked">
              <label for="10"><span></span>10</a></label>
            </div>

            <div class="selection">
              <input type="checkbox" id="20" name="chkSpeedType" value="20" checked="checked">
              <label for="20"><span></span>20</label>
            </div>

            <div class="selection">
              <input type="checkbox" id="30" name="chkSpeedType" value="30" checked="checked">
              <label for="30"><span></span>30</label>
            </div>

          </div>
        </div>

然后，如果复选框未选中：

X 10   _ 20   X 30

Result for 10 // style-a
Result for 10 // style-b
Result for 30 // style-a
Result for 30 // style-b

然后，如果重新检查：

X 10   X 20   X 30

Result for 10 // style-a
Result for 10 // style-b
Result for 20 // style-a
Result for 20 // style-b
Result for 20 // style-a
Result for 30 // style-b
Result for 30 // style-a

---

运行这个。这将使用分离，保存jquery数据的副本，并在需要时将其添加回

$（文档）.ready（函数（）{
var分离内容；
$（“输入[type='checkbox']”）。单击（函数（e）{
var innerTextHTML=$（this）.parent（“div.selection”）.children（'label'）.text（）；
var planWrap=$（“div.plan.+innerTextHTML）.parent（）；
如果（$（this）.is（':checked'））{
planWrap.show（）；
$（'div.plans-container'）.append（detachedContent）；
}否则{
detachedContent=planWrap.detach（）；
}
});
});

速度：
10
20
30
//div的内容
你能添加html吗？
planWrap
，
detachedContent
完全相同的缓存选择器？@guest271314，我不知道该放什么，如果我删除那行，它仍然可以工作，以便它可以分离，但我无法让它返回不完全确定预期的结果，这里？不确定两个
html
代码片段如何出现在文档中
.classes
元素未出现在
html
中？虽然乍一看可以尝试使用
.clone（）
而不是在
planWrap
中的一个位置复制元素，
detachedContent
？仍然无法概念化预期结果。虽然
html
似乎在第一个
之后有
标记，并且在第一个
html
代码段的末尾有额外的
尾随。我尝试过仅使用show和hide，但遇到的问题是，每个返回的div都应该使用第n行交替使用样式。当我刚刚做了一个
planWrap.hide（）
它设置了
style=“display:none；”“
，所以第n行仍然在计算它，我得到：
style-a--style-a--style-b--style-a
谢谢，这基本上是有效的，只是现在有一些问题，将分离的内容拉到样式化div中，但是它比我能得到的要近得多。我修复了我的样式化问题，但是你的解决方案太好了哈哈。在我的初始页面上，我限制显示10个速度中的2个，20个速度中的2个，30个速度中的2个。总的来说，我有5到10个速度，当我分离它时，它隐藏了所有的5个速度，然后当我返回它时，它返回了所有的5个速度，不仅仅是原来的2个速度，但是，它工作了，还有一点调整要做。非常感谢你。
X 10   _ 20   X 30

Result for 10 // style-a
Result for 10 // style-b
Result for 30 // style-a
Result for 30 // style-b

X 10   X 20   X 30

Result for 10 // style-a
Result for 10 // style-b
Result for 20 // style-a
Result for 20 // style-b
Result for 20 // style-a
Result for 30 // style-b
Result for 30 // style-a