台灣最大程式設計社群網站
線上人數
1302
 
會員總數:243634
討論主題:188245
歡迎您免費加入會員
討論區列表 >> Java Script/ Node.js >> Jquery.clone 和 append的問題
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
Jquery.clone 和 append的問題
價值 : 50 QP  點閱數:248 回應數:2

樓主

小強
門外漢
0 23
412 29
發送站內信

HI各位朋友好∼∼
小弟有個問題小請教∼∼
先不論我的情境是什麼,想請各位幫我解釋一下流程!

我有一個DIV id=x1~~我需要可以重覆性的把他加到 Div id=testdiv 中,我用了兩個不同的方式,但卻出現了讓我疑惑的事!

case1
這個case,程式一開始,先把x1 clone到 變數z之中,然後原本的x1先刪掉,
然後,當我點button3∼∼我可以一直將z變數中的x1加到testdiv中。
但讓我疑惑的點是∼∼當我點下button3∼∼然後秀出了x1的input欄位∼∼然後我隨便填值後∼∼再按button2把x1刪掉∼∼
當我再點button3時,重新再把z變數的div放到testdiv中∼∼可是為什麼我剛剛填的值還在??不是應該是全新的input嗎???

<div id="x1"><input type="text" /><input type="text" /><input type="text" /><input type="text" /></div>
<input type="button" value="button3" onclick ="test3()"" />
<input type="button" value="test2" onclick="test2()">
<div id="testdiv"></div>


<script>
var z = $("#x1").clone();
$("#x1").remove();


function test3(){

$("#testdiv").append(z);


}

function test2(){

$("#x1").remove();


}
</script>

..................................................................
case2
在case2中∼∼html裡少了x1這個DIV,
而這次我不用clone的方式∼∼我直接把整個div以字串方式存入變數z
當我按button3時∼∼一樣把z加到testdiv中∼∼然後秀出input欄位∼∼當我隨便填值後∼∼再按button2刪掉x1~~
然後再按button3~~這次跟case1不同∼∼這次出來的input是全新的∼∼沒有剛剛我填的值∼∼


<input type="button" value="button3" onclick ="test3()"" />
<input type="button" value="test2" onclick="test2()">
<div id="testdiv"></div>
<script>
var z = ' <div id="x1"><input type="text" /><input type="text" /><input type="text" /><input type="text" /></div>';


function test3(){

$("#testdiv").append(z);


}

function test2(){

$("#x1").remove();


}
</script>



最後我想問的是∼∼我是不是誤會什麼∼∼∼
在我認為∼∼用clone方式存進z~~和直接將div以字串方式存入z~~有什麼不同嗎∼∼為什麼兩個case不同???
感謝各位前輩解惑

搜尋相關Tags的文章: [ clone ] , [ append ] ,
本篇文章發表於2018-05-05 18:19
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
最有價值解答

淺水員
檢舉此回應
clone是創造一個新的實體
所以 case1 中類似這樣
(以下div多加編號或中括號只是為了說明,實際上沒有那東西。)
(1)原本有:[#0:<div id="x1">]
(2)clone產生新的複製物件#1:z=[#1:<div id="x1">]
(3)remove:從html結構中移除[#0:<div id="x1">],因為沒有東西存放[#0:<div id="x1">]的參考,所以記憶體會被回收
(4)append:把[#1:<div id="x1">]放到html結構中,這時html跟z都是存放同一個物件參考
(5)remove:從html結構中移除[#1:<div id="x1">],但z還存放著這個物件參考,所以不會被真正的刪除(記憶體回收)
(6)append:只是重複4的動作,所以原本填寫的資料還在

至於 case2 則因為 z 只是字串
所以每次 append 會依照字串建立新的物件#1,#2,#3,#4…

這邊給你一個實驗
假設原本

那麼執行下列命令後會發生甚麼事?

[hr]
順便提醒一下
正常的 html 結構 id 是不能重複的
因此在進行類似操作時要避免 id 重複的狀況
本篇文章回覆於2018-05-06 15:52
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

小強
檢舉此回應
嗨淺水員 ~~原來是這樣~~很感謝您的解答
本篇文章回覆於2018-05-08 22:02
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.