具体效果
示例效果
https://coder.itclan.cn/fontend/js/17-yinyong-tongji-elem/
具体描述
在网页中,同级(兄弟)元素,指的是拥有相同的直接父级元素的元素...,并且往往指的是同类的元素,同类元素在实际开发中遇到的比较多
比如:列表li,并列的按钮等,当需要做一些特殊的效果时,可以对其他同级的元素进行一些操作,满足特定的网页要求
比如:隔行填充颜色等
原生方法实现...以下是通过原生js实现,点击按钮时,获取按钮的值
// 获取同级按钮元素的value
function getLevelBtnVal(btn) {
var p = btn.parentNode...; // 通过点击按钮获取到它的父级节点
var children = p.childNodes; // 通过childNodes可以得到父节点的所有子节点
// 遍历子节点...,同级元素拥有相同的父级元素都是p,那么就可以得到除自身以外的的同级元素,如果还需要排除同一类别的话,那么可以使用节点的nodeType属性来加以区别
Vue版本实现
在Vue里面,就不用类似原生js的