131

いくつかのパフォーマンス上の理由から、選択したノードの兄弟ノードのみを選択する方法を見つけようとしています。

例えば、

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
  <div id="inner3"></div>
  <div id="inner4"></div>
</div>

inner1 ノードを選択した場合、その兄弟inner2-4ノードにアクセスする方法はありますか?

4

14 に答える 14

165

ええと...確かに...親にアクセスしてから子にアクセスしてください。

 node.parentNode.childNodes[]

または... jQueryを使用：

$('#innerId').siblings()

編集：クレタスはいつものように刺激的です. さらに掘りました。これは、基本的に jQuery が兄弟を取得する方法です。 

function getChildren(n, skipMe){
    var r = [];
    for ( ; n; n = n.nextSibling ) 
       if ( n.nodeType == 1 && n != skipMe)
          r.push( n );        
    return r;
};

function getSiblings(n) {
    return getChildren(n.parentNode.firstChild, n);
}
于 2009-05-09T00:12:06.717 に答える
117 
var sibling = node.nextSibling;

これは、その直後の兄弟を返すか、null を返します。これ以上兄弟は利用できません。同様に、 を使用できますpreviousSibling。

[編集] よく考えてみると、これは次のdivタグではなく、ノードの後の空白になります。より良いようです

var sibling = node.nextElementSibling;

も存在しpreviousElementSiblingます。

于 2011-11-02T08:35:04.623 に答える
8

jQueryの「兄弟」メソッドを確認しましたか?

    sibling: function( n, elem ) {
        var r = [];

        for ( ; n; n = n.nextSibling ) {
            if ( n.nodeType === 1 && n !== elem ) {
                r.push( n );
            }
        }

        return r;
    }

n.nodeType == 1 要素が html ノードであるかどうかをチェックし、n!== は現在の要素を除外します。

同じ関数を使用できると思います。そのコードはすべてバニラ JavaScript のようです。

于 2012-08-15T14:52:16.957 に答える
5

いくつかの方法があります。

次のいずれかでうまくいくはずです。

// METHOD A (ARRAY.FILTER, STRING.INDEXOF)
var siblings = function(node, children) {
    siblingList = children.filter(function(val) {
        return [node].indexOf(val) != -1;
    });
    return siblingList;
}

// METHOD B (FOR LOOP, IF STATEMENT, ARRAY.PUSH)
var siblings = function(node, children) {
    var siblingList = [];
    for (var n = children.length - 1; n >= 0; n--) {
        if (children[n] != node) {
            siblingList.push(children[n]);
        }  
    }
    return siblingList;
}

// METHOD C (STRING.INDEXOF, ARRAY.SPLICE)
var siblings = function(node, children) {
   siblingList = children;
   index = siblingList.indexOf(node);
   if(index != -1) {
       siblingList.splice(index, 1);
   }
   return siblingList;
}

参考までに: jQuery コードベースは、グレード A の Javascript を観察するための優れたリソースです。

これは、jQuery コードベースを非常に合理的な方法で明らかにする優れたツールです。 http://james.padolsey.com/jquery/

于 2014-04-01T23:51:42.843 に答える
2

document.querySelectorAll()とループと反復を使用する

function sibblingOf(children,targetChild){
  var children = document.querySelectorAll(children);
  for(var i=0; i< children.length; i++){
    children[i].addEventListener("click", function(){
      for(var y=0; y<children.length;y++){children[y].classList.remove("target")}
      this.classList.add("target")
    }, false)
  }
}

sibblingOf("#outer >div","#inner2");
#outer >div:not(.target){color:red}
<div id="outer">
      <div id="inner1">Div 1 </div>
      <div id="inner2">Div 2 </div>
      <div id="inner3">Div 3 </div>
      <div id="inner4">Div 4 </div>
 </div>

于 2016-06-20T19:25:45.047 に答える
1

jQuery

$el.siblings();

ネイティブ - 最新、Edge13+

[...el.parentNode.children].filter((child) =>
  child !== el
);

ネイティブ (代替) - 最新、Edge13+

Array.from(el.parentNode.children).filter((child) =>
  child !== el
);

ネイティブ - IE10+

Array.prototype.filter.call(el.parentNode.children, (child) =>
  child !== el
);
于 2019-08-16T00:51:58.703 に答える
0 
var childNodeArray = document.getElementById('somethingOtherThanid').childNodes;
于 2009-05-09T00:40:44.993 に答える
0

currentNode.nextSibilingプロパティを使用して、次の兄弟ノードにアクセスできます。

これは、イベントリスナーを追加する動的な方法であるイベント委任方法で行うことができる方法です

 document.addEventListener('click', (event) => {
   if (event.target.matches("#inner1")) {
    console.log(event.targert.nextSibling); //inner2 div
    console.log(event.targert.nextSibling.nextSibling); //inner3 div 
    /* The more of the property you keep appending the further it goes to 
    the next sibling */
   }
 })
于 2021-03-23T16:16:47.940 に答える