javascript - 原生 JS如何实现类似Jquery的siblings功能？

问题描述

问 题

如题：
比如我body里面有这么几个链接：

    <a href="javascript:;">连接一</a>
    <a href="javascript:;">连接二</a>
    <a href="javascript:;">连接三</a>
    <a href="javascript:;">连接四</a>
    <a href="javascript:;">连接五</a>
    <a href="javascript:;">连接六</a>
    <a href="javascript:;">连接七</a>
    <a href="javascript:;">连接八</a>
    <a href="javascript:;">连接九</a>

var link = document.getElementsByTagName("a");
for (var i = 0; i < link.length; i++) {
    link[i].addEventListener("click", function() {
        this.style.backgroundColor = "#000";
    })
}

现在能实现单击其中一个链接改变它的背景色，但是如何能实现JQ中很容易实现的功能，点击其中一个，其它的样式也同时变了（切换）。

解决方案

受 @小明 大神的启发，写了最优雅，最高效的方式（我自认为）。

<style>
body{
  background:#CCC;
}
a{
  display:inline-block;
  width:100px;
  padding:5px 10px;
  background:#666;
  text-align:center;
  color:#FFF;
  border:solid 3px #333;
  margin:1px;
}
a.active{
  background-color:#FF0;
  border-color:#C00;
  color:#C00;
}
</style>
<div id="parent">
  <a href="javascript:;">连接一</a>
  <a href="javascript:;">连接二</a>
  <a href="javascript:;">连接三</a>
  <a href="javascript:;">连接四</a>
  <a href="javascript:;">连接五</a>
  <a href="javascript:;">连接六</a>
  <a href="javascript:;">连接七</a>
  <a href="javascript:;">连接八</a>
  <a href="javascript:;">连接九</a>
</div>
<script>
document.getElementById("parent").addEventListener("click", function(event){
    if( event.srcElement.tagName.toLowerCase() == "a" ){
        if( this.lastClick != event.target){
            event.target.className = "active";
            if( !!this.lastClick){
                this.lastClick.className = "";
            }
            this.lastClick = event.target;
        } else {
            console.log("重复点击不触发");
        }
    }
});
</script>

---

以下是老答案：

好像没有原生的方法，试着扩展了一下：

Element.prototype.siblings = function(callback){
    var siblingElement = [];
    var parentAllElement = [];
    if( ! this.parentNode ){
        return siblingElement;
    };
    parentAllElement = this.parentNode.getElementsByTagName(this.tagName);
    for( var i = 0; i < parentAllElement.length ; i++ ){
        if( parentAllElement[i] != this ){
            siblingElement.push(parentAllElement[i]);
            typeof callback == "function" && callback.call(parentAllElement[i]);
        }
    }
    return siblingElement;
};

然后就可以向 jQuery 一样使用 siblings() 了。

var link = document.getElementsByTagName("a");
for (var i = 0; i < link.length; i++) {
    link[i].addEventListener("click", function() {
        this.style.backgroundColor = "#000";
        var siblings = this.siblings(function(){
            this.style.backgroundColor = "#FFF";
        });
        console.log(siblings[0].siblings());
    })
}

附带 html 代码的例子：

<style>
body{
    background:#CCC;
}
a{
    display:block;
    width:100px;
    padding:5px 10px;
    float:left;
    background:#666;
    text-align:center;
    color : #FFF;
    border : solid 3px #333;
    margin: 1px;
}
</style>
<div>
  <a href="javascript:;">连接一</a>
  <a href="javascript:;">连接二</a>
  <a href="javascript:;">连接三</a>
  <a href="javascript:;">连接四</a>
  <a href="javascript:;">连接五</a>
  <a href="javascript:;">连接六</a>
  <a href="javascript:;">连接七</a>
  <a href="javascript:;">连接八</a>
  <a href="javascript:;">连接九</a>
</div>
<script>
Element.prototype.siblings = function(callback){
    var siblingElement = [];
    var parentAllElement = [];
    if( ! this.parentNode ){
        return siblingElement;
    };
    parentAllElement = this.parentNode.getElementsByTagName(this.tagName);
    for( var i = 0; i < parentAllElement.length ; i++ ){
        if( parentAllElement[i] != this ){
            siblingElement.push(parentAllElement[i]);
            typeof callback == "function" && callback.call(parentAllElement[i]);
        }
    }
    delete parentAllElement;
    return siblingElement;
};

var link = document.getElementsByTagName("a");
for (var i = 0; i < link.length; i++) {
    link[i].addEventListener("click", function() {
        this.style.backgroundColor = "#C00";
        this.style.borderColor = "#FF0";
        
        //用法1：callback方式；改变背景为蓝色
        this.siblings(function(){
            this.style.backgroundColor = "#009";
        });
        
        //用法2：返回列表；改变边框为绿色
        this.siblings().forEach(function(sibling){
            sibling.style.borderColor = "#090";
        });
    })
}
</script>

这篇关于javascript - 原生 JS如何实现类似Jquery的siblings功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！