Javascript 将所有类移动到其他类（jQuery）

我正在尝试编写一个js/jquery代码：

// if (@media (max width: 480px))
{
  please all classes `footer--column column--menu block` move to class
  `footer--columns block-group` and delete the `st--footer-column` class.
}

我的HTML现在：

<div class="footer--columns block-group">
  <div class="st--footer-column">
    <div class="footer--column column--menu block">...</div>
    <div class="footer--column column--menu block">...</div>
    <div class="footer--column column--menu block">...</div>
    <div class="footer--column column--menu block">...</div>
  </div>
</div>

...
...
...
...

最终结果是：

<div class="footer--columns block-group">
  <div class="footer--column column--menu block">...</div>
  <div class="footer--column column--menu block">...</div>
  <div class="footer--column column--menu block">...</div>
  <div class="footer--column column--menu block">...</div>
</div>

...
...
...
...

---

我可以使用jQuery，但此代码只有在最大宽度为480px时才能工作。

我个人使用window.innerWidth

if (window.innerWidth <= 480) {
    $('.footer--column.column--menu.block')
        .removeClass('footer--column')
        .removeClass('column--menu')
        .removeClass('block')
        .addClass('footer--columns')
        .addClass('block-group');
}

if（window.innerWidth试试这个


$（文档）.ready（函数（）{
if（window.innerWidth您可以使用来确定媒体查询是否匹配，并使用jQuery的on child
div
s来删除它们的包装


if（window.matchMedia（'（最大宽度：480px））.matches）{
$（'.st--footer column>div'）.unwrap（）；
}

...
...
...
...
您可以执行类似的操作将它们从div中删除

如果未执行
，则div将变为红色

从@31piy的答案中获取if条件


函数更改HTML（）{
如果（（window.matchMedia（'（最大宽度：480px）））.matches）{
//获取div st--footer列
设sts=document.getElementsByClassName（“st--footer列”）；
//既然你没说只有一个，让我们把它们都循环一下
为了（让我来谈谈sts）{
while（i.childElementCount）{
//将子节点附加到另一个节点会将它们从以前的父节点中删除
//我将它们附加到st--footer列div的父级
i、 parentNode.appendChild（i.firstElementChild）
}
//最后删除现在为空的st--footer列div
i、 parentNode.removeChild（i）
}
}否则{
let groups=document.getElementsByClassName（“块组”）；
for（让我看一组）{
让孩子们=我的孩子们；
让stFooterColumn=document.createElement（“div”）；
//添加类
stFooterColumn.classList.add（“st--footer列”）；
//将每个子级添加到新div
while（儿童长度）{
stFooterColumn.appendChild（子项[0]）
}
//将div追加到预览到组
i、 appendChild（stFooterColumn）
}
}
}
window.onresize=changeHtml（）
changeHtml（）
.st--页脚列{
颜色：红色；
}

...
...
...
...
$（窗口）。打开（“调整大小就绪”，函数（事件）{
if（$（窗口）.width（）你打算删除div
st--footer列吗？@Anandhu是的，这也很重要。如果我是对的，你必须保留div
st--footer列的内容。是的，这是个好主意，但内容必须在div
footer--columns块组中。请看最后的结果。效果很好！：）…但我必须制作一个
@media（最大宽度：480px）
标记。@JsStorm2我知道我添加它不是为了让结果在计算机上可见。好的，但现在我需要一个方法，可以用div还原我的代码。@JsStorm2为您这样做：p@JsStorm2同时添加了onresize事件
$(window).on("resize ready",function(event){
    if($(window).width()<=480){
      var $content=$('.st--footer-column').html();
      $('.footer-columns.block-group').html($content);   
    }
});