Question

我在这里找不到不是基于jQuery的帖子，我需要一个普通的JavaScript示例，请不要提出任何与CSS解决方案相关的建议。我知道有CSS方法可以执行类似的操作，但是出于个人原因，我需要一个JavaScript解决方案。

好吧，我需要将所有.x类名div的顺序颠倒，这样看起来就这样

D
C
B
A

默认情况下是这样

A
B
C
D

并且我希望页面加载时滚动条的滚动框从底部开始，以.x div的相反顺序开始，就像我创建的这张照片店图像一样。

这是我的当前代码

/*???*/

#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->

Answer 1

用于反转div的纯JavaScript解决方案

var divElems = document.getElementsByClassName('x');
var divB = document.getElementById('b');

var output = [];
for(var i =divElems.length - 1; i >= 0;i--){
  output.push(divElems[i]);
}

b.innerHTML = '';
output.forEach(function(eachDiv){
    b.appendChild(eachDiv);
});

有效演示-https://jsfiddle.net/71kpLqne/

Answer 2

您可以首先使用以下命令获取所有div document.querySelectorAll('.x');

然后使用.reverse()颠倒此顺序。然后，您可以使用.reduce()将DOM元素数组转换为字符串“ DOM”元素：

const divs = [...document.querySelectorAll('.x')];
const new_order = divs.reverse().reduce((acc, elem) => acc+elem.outerHTML, '');
document.querySelector('#b').innerHTML = new_order;

#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->

如果愿意，您甚至可以将此js简化为单行代码：

document.querySelector('#b').innerHTML = [...document.querySelectorAll('.x')].reverse().reduce((a, e) => a+e.outerHTML, '');

Answer 3

我在评论中提供了链接，并在此处提供了一个先前的类似问题的链接，其中包含许多有效答案： Previous Question

针对您的问题，您可以添加以下纯JavaScript：

<script>

window.onload = function(){
reverseEls("b"); // Reorder your divs
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); // Scroll to the bottom of the page
    }

function reverseEls(elem){
    elem = document.getElementById(elem);
        for (var i=0;i<elem.childNodes.length;i++) {
            elem.insertBefore(elem.childNodes[i], elem.firstChild);
        }
    }

</script>

这将根据需要反转div，并滚动到页面底部。

Answer 4

您可以使用document.querySelectorAll来获取类为x的所有元素，并可以使用[].slice.call将其转换为数组。然后，您可以将#b元素的innerHTML设置为''，以删除其中的所有元素，并使用类x反转元素数组，并使用forEach将每个元素附加到#b元素。

您可以使用elem.scrollTop = elem.scrollHeight;将elem滚动到底部。

#a{
  background-color: gold;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
  color: red;
}

#b{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.x{
  background-color: blue;
  display: block;
  height: 200px;
  width: 100%;
 position: relative;
  border: 2px solid white;
}

<div id='a'>
  <div id='b'>
    
    <div class='x'>
      <h1>A</h1>
    </div><!--</x>-->
    <div class='x'>
      <h1>B</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>C</h1>
    </div><!--</x>-->

    <div class='x'>
      <h1>D</h1>
    </div><!--</x>-->
    
  </div><!--</b>-->
</div><!--</a>-->
<script>
var container = document.querySelector('#b');
var elems = [].slice.call(document.querySelectorAll('.x'));
container.innerHTML = "";
elems.reverse().forEach(function(elem, index){
	container.appendChild(elem);
});
container.scrollTop = container.scrollHeight;
//scroll to bottom of #b div
var body = document.body,
html = document.documentElement;
var docheight = Math.max( body.scrollHeight, body.offsetHeight, 
                   html.clientHeight, html.scrollHeight, html.offsetHeight );
//get height of document cross-browser
window.scrollTo(0, docheight);
//scroll to bottom of document
</script>

JSFiddle演示：http://jsfiddle.net/nfwcp960/embedded/result

纯普通JavaScript中div的反向顺序没有CSS

4 个答案: