使用jquery将div列表中的div复制/克隆到另一个容器中的相应位置的最佳方法是什么。
我尝试复制所有＆＃34; copy-this＆＃34;元素到另一个容器中的相同位置。所以首先＆＃34; .copy-this＆＃34;应该在第二个容器的第一个项目中重复，同样适用于（2） - ＆gt;（2）等......
HTML DOM：
<div class="content">
<div class="item">
<div class="copy-this">Some info</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 2</div>
</div>
<div class="item">
<div class="copy-this">Some info 3</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 4</div>
</div>
</div>
<div class="content">
<div class="item">
</div>
<div class="item">
<div class="random-div">Not to copy</div>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
答案 0 :(得分：3)
修改
OP已请求视口大小（窗口宽度）条件下的行为是在600px或更低时克隆存在。
如何在响应函数中使用此函数，如果窗口在600px下加载/调整大小，则将其复制，如果再次调整为600px以上，则将其删除？如果我将其包装在其中：
public class SyncReceiver extends BroadcastReceiver{ private static final String TAG = "SyncReceiver"; private static final String INTENT_ACTION = "com.rhotechnology.app.SYNC_TASK_HEART_BEAT"; @Override public void onReceive(Context context, Intent intent) { if ((intent.getAction() !=null)) { Virgo virgo = (Virgo) context.getApplicationContext(); SharedPreferences sharedPreferences = virgo.getSharedPreferences ("syncPreferences", android.content.Context.MODE_PRIVATE); if (intent.getAction().equals("android.intent.action.BATTERY_LOW")) { sharedPreferences.edit().putBoolean(Constants.BACKGROUND_SERVICE_BATTERY_CONTROL, false).apply(); stopSyncReceiverHeartBeat(context); } else if (intent.getAction().equals("android.intent.action.BATTERY_OKAY")) { sharedPreferences.edit().putBoolean(Constants.BACKGROUND_SERVICE_BATTERY_CONTROL, true).apply(); restartSyncReceiverHeartBeat(context, virgo); } else if (intent.getAction().equals(INTENT_ACTION)) { onSync(context, virgo); } } } public void onSync(Context context, Virgo virgo){ Log.v(TAG,"Syncing"); } public void restartSyncReceiverHeartBeat(Context context, Virgo virgo) { SharedPreferences sharedPreferences = virgo.getSharedPreferences ("syncPreferences", MODE_PRIVATE); boolean isBatteryOk = sharedPreferences.getBoolean(Constants.BACKGROUND_SERVICE_BATTERY_CONTROL, true); Intent alarmIntent = new Intent(context, Virgo.class); boolean isAlarmUp = PendingIntent.getBroadcast(context, 0, alarmIntent, PendingIntent.FLAG_NO_CREATE) != null; if (isBatteryOk && !isAlarmUp) { AlarmManager alarmManager = (AlarmManager) context.getSystemService(Context.ALARM_SERVICE); alarmIntent.setAction(INTENT_ACTION); PendingIntent pendingIntent = PendingIntent.getBroadcast(context, 0, alarmIntent, 0); alarmManager.setInexactRepeating(AlarmManager.ELAPSED_REALTIME_WAKEUP, SystemClock.elapsedRealtime(), AlarmManager.INTERVAL_FIFTEEN_MINUTES, pendingIntent); } } public void stopSyncReceiverHeartBeat(Context context) { AlarmManager alarmManager = (AlarmManager) context.getSystemService(Context.ALARM_SERVICE); Intent alarmIntent = new Intent(context, Virgo.class); alarmIntent.setAction(INTENT_ACTION); PendingIntent pendingIntent = PendingIntent.getBroadcast(context, 0, alarmIntent, 0); alarmManager.cancel(pendingIntent); }它会为每个调整大小继续触发。
虽然这应该是另一个问题，但我已经在OP的评论/问题中添加了这个解决方案。以下PLUNKER使用一个媒体查询，而额外的样式仅用于演示目的。相关的添加是一个带有一个规则集的媒体查询：
$(window).on("load resize",function(e){ if ($(window).width() < 1200) { } });
原始回答
首先，我们使用.each()方法收集所有@media (min-width:600px) {
.content + .content > .item > .copy-this {
display: none;
}
}
：
.copy-this
接下来，我们需要区分2个$('.copy-this').each(function(idx, obj) {
div，以便指定我们需要克隆内容的哪一个以及将克隆附加到哪一个（没有修改布局，假设一个标准），我们可以使用adjacent sibling selector +。通过我们将附加的目标元素的固定挂钩，我们将使用.eq(idx)来同步.content从第一个.item到.content的{{1}} s最后.item。
.content
最后，我们.clone()和.prepend()。请注意结果，克隆在黑色背景上以黄色文本突出显示。
var target = $('.content + .content > .item').eq(idx);
<强>段
var clone = $(this).clone(true, true);
target.prepend(clone);
$('.copy-this').each(function(idx, obj) {
var target = $('.content + .content > .item').eq(idx);
var clone = $(this).clone(true, true);
target.prepend(clone);
});.content + .content > .item > .copy-this {
color: yellow;
background: black;
}
.random-div {
color: brown;
}
答案 1 :(得分：2)
尝试遍历第一个div，然后将copyHTML of copy-this插入第二个容器
var content1 = document.getElementsByClassName('content')[0],
content1Items = content1.getElementsByClassName('item'),
content2 = document.getElementsByClassName('content')[1],
content2Items = content2.getElementsByClassName('item'),
copiedHTML;
for (var i = 0, l = content1Items.length; i < l; i++) {
copiedHTML = content1Items[i].getElementsByClassName('copy-this')[0].outerHTML;
content2Items[i].insertAdjacentHTML('afterbegin', copiedHTML);
}<div class="content">
<div class="item">
<div class="copy-this">Some info</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 2</div>
</div>
<div class="item">
<div class="copy-this">Some info 3</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 4</div>
</div>
</div>
<div class="content">
<div class="item">
</div>
<div class="item">
<div class="random-div">Not to copy</div>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
var content1 = $('.content').eq(0),
content2 = $('.content').eq(1),
copiedHTML;
$.each(content1.find('.item'), function (i, item) {
copiedHTML = $(item).find('.copy-this').clone();
content2.find('.item').eq(i).prepend(copiedHTML);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="content">
<div class="item">
<div class="copy-this">Some info</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 2</div>
</div>
<div class="item">
<div class="copy-this">Some info 3</div>
<div class="random-div">Not to copy</div>
</div>
<div class="item">
<div class="copy-this">Some info 4</div>
</div>
</div>
<div class="content">
<div class="item">
</div>
<div class="item">
<div class="random-div">Not to copy</div>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>