パフォーマンス上の理由から、選択したノードの兄弟ノードのみを選択する方法を探しています。例えば、
<div id="outer">
<div id="inner1"> </div>
<div id="inner2"> </div>
<div id="inner3"> </div>
<div id="inner4"> </div>
</div>
Inner1ノードを選択した場合、その兄弟にアクセスする方法はありますか、inner2-4
ノード?
まあ...確かに...ただ親にアクセスしてから、子にアクセスしてください。
node.parentNode.childNodes[]
または... jQueryを使用:
$('#innerId').siblings()
編集:いつものようにCletusは刺激的です。さらに掘り下げました。これが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);
}
var sibling = node.nextSibling;
これは、その直後に兄弟を返すか、使用可能な兄弟がこれ以上ない場合はnullを返します。同様に、previousSibling
を使用できます。
[編集]考え直して、これは次のdiv
タグではなく、ノードの後の空白を与えます。より良いようです
var sibling = node.nextElementSibling;
previousElementSibling
も存在します。
クイック:
var siblings = n => [...n.parentElement.children].filter(c=>c!=n)
https://codepen.io/anon/pen/LLoyrP?editors=1011
親の子を配列として取得し、この要素を除外します。
編集:
テキストノードを除外するには(ありがとう pmrotule ):
var siblings = n => [...n.parentElement.children].filter(c=>c.nodeType == 1 && c!=n)
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のようです。
2017年から:
直接的な答え:element.nextElementSibling
正しい要素の兄弟を取得します。また、あなたはelement.previousElementSibling
前のもの
ここからは、次のすべての歯を手に入れるのはとても簡単です
var n = element, ret = [];
while (n = n.nextElementSibling){
ret.Push(n)
}
return ret;
いくつかの方法があります。
次のいずれかがトリックを行う必要があります。
// 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;
}
FYI:jQueryコードベースは、グレードAのJavaScriptを観察するための優れたリソースです。
非常に合理化された方法でjQueryコードベースを明らかにする優れたツールがあります。http://james.padolsey.com/ jquery /
前、次、およびすべての兄弟(両側)を取得する方法は次のとおりです。
function prevSiblings(target) {
var siblings = [], n = target;
while(n = n.previousElementSibling) siblings.Push(n);
return siblings;
}
function nextSiblings(target) {
var siblings = [], n = target;
while(n = n.nextElementSibling) siblings.Push(n);
return siblings;
}
function siblings(target) {
var prev = prevSiblings(target) || [],
next = nexSiblings(target) || [];
return prev.concat(next);
}
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>
_
var childNodeArray = document.getElementById('somethingOtherThanid').childNodes;
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
);
1)選択したクラスをターゲット要素に追加します
2)ターゲット要素を除く親要素のすべての子を検索します
3)ターゲット要素からクラスを削除します
<div id = "outer">
<div class="item" id="inner1">Div 1 </div>
<div class="item" id="inner2">Div 2 </div>
<div class="item" id="inner3">Div 3 </div>
<div class="item" id="inner4">Div 4 </div>
</div>
function getSiblings(target) {
target.classList.add('selected');
let siblings = document.querySelecttorAll('#outer .item:not(.currentlySelected)')
target.classList.remove('selected');
return siblings
}