Is there a way to select sibling nodes

Question

For some performance reasons  I am trying to find a way to select only sibling nodes of the selected node  For example   lt div id  quot outer quot  gt     lt div id  quot inner1 quot  gt  lt  div gt     lt div id  quot inner2 quot  gt  lt  div gt     lt div id  quot inner3 quot  gt  lt  div gt     lt div id  quot inner4 quot  gt  lt  div gt   lt  div gt   If I selected inner1 node  is there a way for me to access its siblings  inner2-4 nodes

User · Answer

The following function will return an array containing all the siblings of the given element.

function getSiblings(elem) {
    return [...elem.parentNode.children].filter(item => item !== elem);
}

Just pass the selected element into the getSiblings() function as it's only parameter.

User · Answer

From 2017  straightforward answer  element nextElementSibling for get the right element sibling  also you have element previousElementSibling for previous one  from here is pretty simple to got all next sibiling   var n   element  ret       while  n   n nextElementSibling     ret push n    return ret

User · Answer

Well    sure    just access the parent and then the children    node parentNode childNodes     or    using jQuery       innerId   siblings     Edit  Cletus as always is inspiring  I dug further  This is how jQuery gets siblings essentially    function getChildren n  skipMe       var r           for     n  n   n nextSibling           if   n nodeType    1  amp  amp  n    skipMe            r push  n                return r      function getSiblings n        return getChildren n parentNode firstChild  n

User · Answer

1  Add selected class to target element  2  Find all children of parent element excluding target element  3  Remove class from target element    lt div id    outer  gt               lt div class  item  id  inner1  gt Div 1  lt  div gt               lt div class  item  id  inner2  gt Div 2  lt  div gt               lt div class  item  id  inner3  gt Div 3  lt  div gt               lt div class  item  id  inner4  gt Div 4  lt  div gt              lt  div gt     function getSiblings target        target classList add  selected        let siblings   document querySelecttorAll   outer  item not  currentlySelected        target classList remove  selected     return siblings

User · Answer

var sibling   node nextSibling    This will return the sibling immediately after it  or null no more siblings are available  Likewise  you can use previousSibling    Edit  On second thought  this will not give the next div tag  but the whitespace after the node  Better seems to be  var sibling   node nextElementSibling    There also exists a previousElementSibling

User · Answer

Quick   var siblings   n   gt      n parentElement children  filter c  gt c  n    https   codepen io anon pen LLoyrP editors 1011  Get the parent s children as an array  filter out this element   Edit    And to filter out text nodes  Thanks pmrotule    var siblings   n   gt      n parentElement children  filter c  gt c nodeType    1  amp  amp  c  n

User · Answer

x1   document getElementById  outer   0         getElementsByTagName  ul   1         getElementsByTagName  li   2   x1 setAttribute  id    buyOnlineLocationFix

User · Answer

var childNodeArray   document getElementById  somethingOtherThanid   childNodes

User · Answer

There are a few ways to do it   Either one of the following should do the trick      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  gt   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  The jQuery code-base is a great resource for observing Grade A Javascript   Here is an excellent tool that reveals the jQuery code-base in a very streamlined way  http   james padolsey com jquery

User · Answer

jQuery   el siblings      Native - latest  Edge13       el parentNode children  filter  child    gt    child     el      Native  alternative  - latest  Edge13   Array from el parentNode children  filter  child    gt    child     el      Native - IE10   Array prototype filter call el parentNode children   child    gt    child     el

User · Answer

Here s how you could get previous  next and all siblings  both sides    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

User · Answer

Use document querySelectorAll   and Loops and iteration   x000D   x000D  function sibblingOf children targetChild   x000D    var children   document querySelectorAll children   x000D    for var i 0  i lt  children length  i     x000D      children i  addEventListener  click   function    x000D        for var y 0  y lt children length y    children y  classList remove  target    x000D        this classList add  target   x000D         false  x000D      x000D    x000D   x000D  sibblingOf   outer  gt div    inner2    x000D   outer  gt div not  target  color red  x000D   lt div id  outer  gt  x000D         lt div id  inner1  gt Div 1  lt  div gt  x000D         lt div id  inner2  gt Div 2  lt  div gt  x000D         lt div id  inner3  gt Div 3  lt  div gt  x000D         lt div id  inner4  gt Div 4  lt  div gt  x000D    lt  div gt  x000D   x000D   x000D

User · Answer

have you checked the  Sibling  method in jQuery       sibling  function  n  elem             var r                for     n  n   n nextSibling                 if   n nodeType     1  amp  amp  n     elem                     r push  n                                     return r          the n nodeType    1 check if the element is a html node  and n    exclude the current element   I think you can use the same function  all that code seems to be vanilla javascript

[javascript] Is there a way to select sibling nodes?

Examples related to javascript

Examples related to dom

Examples related to siblings