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

Question

我正在尝试编写一个 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，但只有当最大宽度为 480 像素时，此代码才能工作。

标签： javascriptjqueryhtml

Answer 1

尝试这个

$(document).ready(function(){
if (window.innerWidth <= 480){
      $('.footer--columns').html($('.st--footer-column').html());
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>