如何将外层div内的内层div移至外层div外？CSS或jQuery可行吗？

嘿，这个需求CSS是无法实现的——CSS的作用仅限于控制元素的视觉样式与布局表现，没办法直接修改HTML的DOM结构。不过用jQuery完全可以轻松达成你的目标，下面给你两种实用的实现方案：

方案一：使用insertAfter()方法 #

这种方法直接将目标元素移动到外层容器的后方：

// 确保DOM加载完成后执行
$(document).ready(function() {
  // 遍历所有class为vc_gitem-zone-mini的容器
  $('.vc_gitem-zone-mini').each(function() {
    // 匹配内部class以vc_gitem_row开头的div
    var $targetRow = $(this).find('div[class^="vc_gitem_row"]');
    // 将该元素移动到当前容器的外部后方
    $targetRow.insertAfter($(this));
  });
});

方案二：使用detach() + after()方法 #

如果目标元素绑定了事件或数据，detach()会保留这些信息，再通过after()插入到目标位置：

$(document).ready(function() {
  $('.vc_gitem-zone-mini').each(function() {
    // 移除目标元素但保留其数据和事件
    var $targetRow = $(this).children('div[class^="vc_gitem_row"]').detach();
    // 将元素插入到外层容器之后
    $(this).after($targetRow);
  });
});

补充说明 #

• 选择器div[class^="vc_gitem_row"]用于匹配所有class以vc_gitem_row开头的div元素，不管后面跟着多少字符都能精准命中。
• 一定要把代码放在$(document).ready()回调中，确保页面DOM完全加载后再执行元素移动操作，避免找不到目标元素的问题。

内容的提问来源于stack exchange，提问作者Muhammad Rizwan