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

问题描述

问 题

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

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

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

解决方案

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++;
    }
  };
}

这篇关于html - javascript之DOM操作，如何同时操作当前元素的上个兄弟节点和下个兄弟节点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！