將元素追加到div容器內只在parentcontainer中

-1

如何將.div4追加到父容器上的.div1 onLy，而不添加到下一個具有相同div的容器？我嘗試了基本的jQuery appendTo，但是這會在我的DOM中的所有.div1元素上設置.div4。將元素追加到div容器內只在parentcontainer中

<div class="container"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
    <div class="div3"></div> 
    <div class="div4"></div> 
</div> 
<div class="container"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
    <div class="div3"></div> 
</div>

更新：更改了無效的HTML。使用這個腳本現在（我的實際div的更換假的div）：

var $this = $('span.conditionHilite.refurbHilite'); 
$this.appendTo($this.closest('.itembox.centerbox.col.span_1_of_3').find('.image.col1'));

現在的問題是，如果我的頁面包含一個以上容器以「span.conditionHilite.refurbHilite」這將追加的這些總量每個parentcontainer內部的元素，而不僅僅是一個。

來源

2015-11-03 Xeptor

您有重複的'id'屬性，這意味着您的HTML無效。 –

看來你是用錯了的方式使用id和class; id的意圖是獨特的，而類的目的是可重用的。 – OliverRadini

不幸的是，這是如何設置HTML和沒有什麼我可以改變。它是我公司的商店平臺 - 每個容器都是具有相同html的產品。一些產品雖然在一個新的元素中有一個地位 - 我想通過附加它來移動。但是這樣做會增加每個容器的重量 - 我想將它保留在其父容器內。 – Xeptor

如果您嘗試使用jQuery將元素追加到多個目標元素，它會克隆該元素，但需要多次。如果您只想將.div4添加到.div1元素的同一個容器元素中，則需要明確選擇該元素。事情是這樣的：

var $this = $('.div4'); 
$this.appendTo($this.closest('.container').find('.div1'));

使用.closest()向上遍歷DOM樹找到包含元素，然後.find()去尋找.div1元素包含元素中。使用目前的DOM結構只能是單個元素，因此只需移動.div4元素，而不創建任何克隆。

注意：正如Rory McCrossan指出的那樣，您在HTML中重新使用了ID，因此它是無效的。我在上面的代碼中使用了一個類選擇器，假設您將通過從id="container"切換到class="container"來修復無效的HTML。如果 - 如評論中所述 - 你絕對不能改變這一點，那麼'[id="container"]'選擇器應該工作。

來源

2015-11-03 10:54:35

我的錯誤。我的HTML確實有它的容器的類。這種方法有效 - 它將元素保存在parentcontainer中。但。我的代碼重複 - 我有幾個容器與我的目標div - 在我的測試頁上我試過你的腳本我有4個容器與.div1，所以它附加了4 .div1每個容器包含所述元素。 – Xeptor

@Xeptor我的代碼中的'var $ this = $（'。div4'）'行是佔位符，用於獲取對您實際想要使用的單個特定元素的引用的行。這段代碼什麼時候運行？ –

@Antohony Griest那麼特定的元素將顯示在其他容器中 - 我希望它會在每個元素上附加元素 - 這是確實的，但它也重複它在文檔加載時找到的所有目標元素，給我每個父容器內特定元素的數量。它加載文檔準備就緒。 – Xeptor

將元素追加到div容器內只在parentcontainer中

回答

相關問題