Question

如果我们尝试使用手册中给出的示例代码： https://api.jquery.com/detach/ 效果很好。

现在，我只想重新附加我分离的一部分。代码就像这样：

var listeCourante = $(this).children().filter(".spanUnite").detach();

for(var i in listeCourante){
  if(something){
    listeCourante[i].appendTo($(this));
    break;
  }
}

然后我收到消息“ TypeError：listeCourante [i] .appendTo不是函数”。

当我检查什么是listeCourante [i]时，它是DOM元素，所以我不明白为什么appendTo（）函数不存在。

有什么主意吗？

谢谢

Answer 1

您需要了解，一旦使用deatch()函数，该HTML将从DOM中删除，它将不再存在。

如果要再次使用该未附加的html，则需要保存在变量中。

尝试一下：

$(document).ready(function(){
    var msg;//save deatched html here.
    $('#btDetach').click(function () {
        msg = $('p');
        msg.detach();
    });


    $('#btAttach').click(function () {
        $(msg).find('b').appendTo($('#listeCourante li.name'));
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>This is somemething here, <b>hi there</b></p>

<ul id="listeCourante">
    <li>Samir</li>
    <li class="name">John</li>
    <li class="name">Ram</li>
    <li>Jaydeep</li>
</ul>

<button id="btDetach">Detach</button>

<button id="btAttach">Attach</button>

Answer 2

您做对了。您只需要写$(listeCourante[i])而不是listeCourante[i]。

这是因为jquery的选择器对象。它返回一个被jquery对象覆盖的数组。如果要引用此数组的索引并使用jquery函数，则必须再次用$()覆盖该索引。

您的代码将如下所示：

var listeCourante = $(this).children().filter(".spanUnite").detach();

for(var i in listeCourante){
  if(something){
    $(listeCourante[i]).appendTo($(this));
    break;
  }
}

Answer 3

谢谢您的主张，但这并不完全奏效。我找到了要更改的内容，请在此处查看评论：

$( document ).ready( function() {
	var saveLi2 = null;
	
	
	
	$("#detachGo2").on("click", function(){
		var tmp = $("#theListe2").children().detach();
		if(saveLi2 == null){
			saveLi2 = tmp;
		}
	});
	
	$("#attachGo2").on("click", function(){
		for(aLi in saveLi2){
			if(!isNaN(aLi) && (saveLi2[aLi].innerText.indexOf("a")!=-1)){
				//saveLi2[aLi].appendTo($("#theListe2")); // not work
				$("#theListe2").append(saveLi2[aLi]); // work
				
			}
		}
		//saveLi2.appendTo($("#theListe2")).hide();
	});
	
});	//fin $( document ).ready




//]]>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


The list:

<ul id="theListe2">
<li>aaaaaaaaaa</li>
<li>bbbbbbbbbb</li>
<li>cccccccccccaaaa</li>
<li>dddddddddddddd</li>
<li>cccccccccccccc</li>
<li>ddddddddddddaaa</li>
</ul>

<input type="button" value="detach" id="detachGo2"/>
<input type="button" value="attach" id="attachGo2"/>

再次感谢！

jQuery分离/附加分离的一部分

3 个答案: