將具有相同類別的多個元素分配給具有相同類別的其他元素

您好需要一些幫助將具有相同類別的多個元素分配給具有相同類別的其他多個元素。我想也許.appendTo可以幫助這個。將具有相同類別的多個元素分配給具有相同類別的其他元素

我想將這些： ...

<div class="button"> 
... 
</div> 

<div class="button"> 
... 
</div> 

<div class="button"> 
... 
</div>

到這些： ...

<div class="button_place"> 
... 
</div> 

<div class="button_place"> 
... 
</div> 

<div class="button_place"> 
... 
</div>

讓我有這些：在第一第一個按鈕button_place等...

<div class="button_place"> 
    <div class="button"> 
    ... 
    </div> 
</div> 

<div class="button_place"> 
    <div class="button"> 
    ... 
    </div> 
</div> 

<div class="button_place"> 
    <div class="button"> 
    ... 
    </div> 
</div>

來源

2017-05-04 user3185808

它不只是不僅僅是3個元素，而且至少20個我需要這樣移動 – user3185808

答案只描述複製行爲。移動某物意味着複製和刪除。你是否在尋找這個行動的答案或僅供複製？ – reporter

選擇兩個集合，遍歷一個集合，並追加到另一個集合。

var buttons = $(".button"), 
 
    places = $(".button_place"); 
 

 
buttons.each(function(i, elem) { 
 
    places.eq(i).append(elem) 
 
})

.button_place { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="button"> 
 
    b1 
 
</div> 
 

 
<div class="button"> 
 
    b2 
 
</div> 
 

 
<div class="button"> 
 
    b3 
 
</div> 
 

 
<div class="button_place"> 
 

 
</div> 
 

 
<div class="button_place"> 
 

 
</div> 
 

 
<div class="button_place"> 
 

 
</div>

來源

2017-05-04 12:48:56 epascarello

正是我需要的感謝！ – user3185808

選擇所有按鈕和地點。然後遍歷按鈕並將它們追加到相應的地方容器。

jQuery的版本：

const $places = $('.button_place') 

$('.button').each(function(i) { 
    $places[i].appendChild(this) 
})

純JS版：

const buttons = document.querySelectorAll('.button') 
const places = document.querySelectorAll('.button_place') 

buttons.forEach(function(button, index) { 
    places[index].appendChild(button) 
}) 
// NodeList.prototype.forEach is not supported in IE, 
// convert NodeList to array first with slice, Array.from, etc.

來源

2017-05-04 12:46:47 dfsq

只需用$('.button_place')。而append($('.button').eq(a).clone()).html()each()使用其用於獲取的button

$('.button_place').each(function(a, b) { 
 
    $(this).append($('.button').eq(a).clone()).html() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="button"> button</div> 
 
<div class="button"> button</div> 
 
<div class="button"> button</div> 
 

 

 

 
<div class="button_place">button_place</div> 
 
<div class="button_place">button_place</div> 
 
<div class="button_place">button_place</div>

的outerhtml

來源

2017-05-04 12:47:28 prasanth

您可以使用每個功能做到這一點：

https://jsfiddle.net/o2gxgz9r/6623/

$(".button_place").each(function(index,elem){ 
//$(elem).html($(".button").eq(0)); 
$(elem).append($(".button").eq(0)); 
})

使用HTML功能，如果你要替換的內容和使用，如果要追加在最後添加內容。

來源

2017-05-04 12:52:09 Nitesh

將具有相同類別的多個元素分配給具有相同類別的其他元素

回答

相關問題