jquery动态多条件筛选功能 一个元素后面加一个元素不起作用

Question

需求是一个多条件筛选，动态生成第一类，然后鼠标hover展示第二类，所以想after在大类所属的span后面

$.each(obj.params, function (id, val) {

     span_param = $("<span class='canhover'></span>").text(val.value)

     var secondUl=$("<ul class='secondCateList'></ul>");

     $.each(val.secondParams, function (index, item) {

         var secondLi = $("<li>"+item.secondvalue+"</li>");

         secondUl.append(secondLi)

         })
         //往下面的三行的这里这里
         // span_param.after('<h4>569</h4>');
         //span_param.insertAfter(secondUl)
         span_param.append(secondUl)

         span_param.attr('value', val.id)

         div_params.append(span_param)

 })

上图是用了span_param.append(secondUl)，这段ul就插入了span的内部

上图用了after 和insertAfter,然后ul就不见了....
我只想让每个ul插入每个对应的span的后面，各位大神走过路过不要错过，指点一下吧，谢谢！！！

Answer 1

所以，其实不是要在 span 里面插入 ul，而是跟在 sapn 后面吧？根据你的代码，只需把注释下面的内容换成下面的代码就成：

span_param.attr('value', val.id)
div_params.append(span_param)
div_params.append(secondUl)

在 jQuery 的内部，其实 after 和 insertAfter 方法最后用的都是原生的 insertBefore 方法。根据你这里的情况，内部在使用 insertBefore 方法时的父节点其实是文档片段，这样一样它确实把你的 ul 及其里面的部分正常添加到了 span 后面，但在你最后将 span 添加到真正的文档中时，只是添加了 span，而没有添加它的兄弟元素。

Answer 2

span 里面插入 ul？亏你想的出来。

after 和 insertAfter 的时候 clone 一下 就不会消失了