将所有类移至其他类（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，但是只有最大宽度为480px时，此代码才有效。

Answer 1

我个人使用window.innerWidth

NaN

您可以在jsfiddle上调整渲染面板的大小，使其小于480px，以查看结果

http://jsfiddle.net/vjLrcsuk/10/

Answer 2

尝试一下

$(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>

Answer 3

您可以使用window.matchMedia确定媒体查询是否匹配，并在子div上使用jQuery的unwrap()删除其包装。

if (window.matchMedia('(max-width: 480px)').matches) {
   $('.st--footer-column > div').unwrap();
}

<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>

Answer 4

您可以执行以下操作将其从div中删除

if未执行时div将变为红色

从@ 31piy的答案中得出if条件

function changeHtml() {
  if ( (window.matchMedia('(max-width: 480px)')).matches ) {
    // get the div st--footer-column
    let sts = document.getElementsByClassName("st--footer-column");

    // since you didn't say there will be only one let's loop them all
    for (let i of sts) {
      while (i.childElementCount) {
        // appending the child to another Node remove them from their previous parent
        // I append them to the parent of the st--footer-column div
        i.parentNode.appendChild(i.firstElementChild)
      }
      // finally remove the now empty st--footer-column div
      i.parentNode.removeChild(i)
    }
  } else {
    let groups = document.getElementsByClassName("block-group");

    for (let i of groups) {
      let childrens = i.children;
      let stFooterColumn = document.createElement("div");

      // add the class
      stFooterColumn.classList.add("st--footer-column");

      // add each child to the new div
      while (childrens.length) {
        stFooterColumn.appendChild(childrens[0])
      }

      // append the div to previews to group
      i.appendChild(stFooterColumn)
    }
  }
}

window.onresize = changeHtml()
changeHtml()

.st--footer-column {
  color: red;
}

<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>

相同，但没有if，供大屏幕上的用户进行测试

删除div

// get the div st--footer-column
let sts = document.getElementsByClassName("st--footer-column");

// since you didn't say there will be only one let's loop them all
for (let i of sts) {
  while (i.childElementCount) {
    // appending the child to another Node remove them from their previous parent
    // I append them to the parent of the st--footer-column div
    i.parentNode.appendChild(i.firstElementChild)
  }
  // finally remove the now empty st--footer-column div
  i.parentNode.removeChild(i)
}

<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

let groups = document.getElementsByClassName("block-group");

for (let i of groups) {
  let childrens = i.children;
  let stFooterColumn = document.createElement("div");

  // add the class
  stFooterColumn.classList.add("st--footer-column");

  // add each child to the new div
  while (childrens.length) {
    stFooterColumn.appendChild(childrens[0])
  }

  // append the div to previews to group
  i.appendChild(stFooterColumn)
}

<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>

---

这是第二个显示相同内容但逐步显示的内容（没有if）

使用generator function

删除div

function* removeDivs() {
  // get the div st--footer-column
  let sts = document.getElementsByClassName("st--footer-column");

  // since you didn't say there will be only one let's loop them all
  for (let i of sts) {
    while (i.childElementCount) {
      // appending the child to another Node remove them from their previous parent
      // I append them to the parent of the st--footer-column div
      i.parentNode.appendChild(i.firstElementChild)
      
      updatePreview()
      
      yield true
    }
    // finally remove the now empty st--footer-column div
    i.parentNode.removeChild(i)
    updatePreview()
    yield false
  }
}

function updatePreview() {
  let div = document.getElementById("div")
  let arr = Array.from(div.children)
  
  document.getElementById("preview").innerHTML = arr.map(i => i.outerHTML.replace(/<div class=\"footer--column column--menu block\">/g, "<div class=\"footer--column column--menu block\">&lt;div class=\"footer--column column--menu block\"&gt;").replace(/<div class=\"st--footer-column\">/g, "<div class=\"st--footer-column\">&lt;div class=\"st--footer-column\"&gt;").replace(/<\/div>/g, "&lt;/div&gt;</div>")).join("")
}

remove = removeDivs()
updatePreview()

let interval = setInterval(() => {if(remove.next().value === false) {clearInterval(interval)}}, 2000)

.st--footer-column {
  color: red;
}

<div id="div" class="footer--columns block-group">
  <div class="st--footer-column">
    <div class="footer--column column--menu block">one</div>
    <div class="footer--column column--menu block">two</div>
    <div class="footer--column column--menu block">three</div>
    <div class="footer--column column--menu block">four</div>
  </div>
</div>

<br><br>
<div id="preview"></div>

添加div

function* removeDivs() {
  let groups = document.getElementsByClassName("block-group");

  for (let i of groups) {
    let childrens = i.children;
    let stFooterColumn = document.createElement("div");

    // add the class
    stFooterColumn.classList.add("st--footer-column");
    i.appendChild(stFooterColumn)
    updatePreview()
    yield true;

    // add each child to the new div
    while (childrens.length) {
      stFooterColumn.appendChild(childrens[0])
      updatePreview()
      yield true;
    }

    // append the div to previews to group
    updatePreview()
  }
  yield false;
}

function updatePreview() {
  let div = document.getElementById("div")
  let arr = Array.from(div.children)
  
  document.getElementById("preview").innerHTML = arr.map(i => i.outerHTML.replace(/<div class=\"footer--column column--menu block\">/g, "<div class=\"footer--column column--menu block\">&lt;div class=\"footer--column column--menu block\"&gt;").replace(/<div class=\"st--footer-column\">/g, "<div class=\"st--footer-column\">&lt;div class=\"st--footer-column\"&gt;").replace(/<\/div>/g, "&lt;/div&gt;</div>")).join("")
}

remove = removeDivs()
updatePreview()

let interval = setInterval(() => {if(remove.next().value === false) {clearInterval(interval)}}, 2000)

.st--footer-column {
  color: red;
}

<div id="div" class="footer--columns block-group">
    <div class="footer--column column--menu block">one</div>
    <div class="footer--column column--menu block">two</div>
    <div class="footer--column column--menu block">three</div>
    <div class="footer--column column--menu block">four</div>
</div>

<br><br>
<div id="preview"></div>

<br><br>
<div>could not find why the error at the end of this one</div>

Answer 5

function greeting (name, callback){
  console.log(`Greetings ${name}`);
  callback();
};

function timeOfDay (time){
  console.log(`How are you this fine ${time}?`);
};

greeting ('Brad', timeOfDay.bind(this,'evening') );

在每次调整大小和初始加载时调用该函数