javascript之DOM操作，如何同时操作当前元素的上个兄弟节点和下个兄弟节点？

Question

问题描述：点击当前Div，看是否有上个兄弟节点或者下个兄弟节点，如果有，就让他们依次下落

代码：http://runjs.cn/code/vvjfuulj 【妈蛋，为什么runjs在iphone的Safari里无法看到预览效果_(:з」∠)_

虽然我的代码最终实现了功能，但我觉得自己写得太啰嗦了，不知道有没有大神有更简便的方法？

Answer 1

var str='';
var body=document.getElementsByTagName('body')[0];
for (var i = 0; i < 10; i++) {
  str += `<div style="left:${i*45}px;background:red"></div>`;
}
document.body.innerHTML=str;

var aDiv=document.getElementsByTagName('div');
for (var i = 0; i < aDiv.length; i++) {
  aDiv[i].index=i;
  aDiv[i].onclick=function () {
    this.style.transition='1s';
this.style.top='200px';
var d=v=this;
var t=2;    
while(d.previousElementSibling || v.nextElementSibling){
  d = d.previousElementSibling?d.previousElementSibling:false;
  v = v.nextElementSibling?v.nextElementSibling:false;
  if(d){
    d.style.transition = (t)+'s';
  d.style.top='200px';
}
if(v){
  v.style.transition = (t) +'s';
  v.style.top='200px';
      }
      t++;
    }
  };
}

Answer 2

为什么不用jQuery的siblings(兄弟元素)

Answer 3

siblings()
parent().children()

Answer 4

原生Javascript里面的DOM节点自带 previousSibling 和 nextSibling属性。
返回同一树层级中指定节点的前一个或下一个节点。

that1 = this.previousSibling;
that2 = this.nextSibling;

Answer 5

    for (var i = 0; i < aDiv.length; i++) {
        aDiv[i].index=i;
        aDiv[i].onclick=function () {
            this.style.transition='1s';
            this.style.top='200px';
            var prevt=2;
            var nextt=2; 
            prev(this.previousElementSibling);
            next(this.nextElementSibling);
            function prev(obj){
                if(obj){
                    obj.style.transition = prevt+'s';
                    obj.style.top='200px';     
                    prevt++;
                    prev(obj.previousElementSibling);
                }                
            }
            function next(obj){
                if(obj){
                    obj.style.transition = nextt+'s';
                    obj.style.top='200px';    
                    nextt++;
                    next(obj.nextElementSibling);
                }                
            }            
        };
    }