क्या सिबलिंग नोड्स का चयन करने का एक तरीका है?

Question

कुछ प्रदर्शन कारणों के लिए, मैं चयनित नोड के केवल सिबलिंग नोड्स का चयन करने का एक तरीका खोजने की कोशिश कर रहा हूं।

उदाहरण के लिए,

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

अगर मैंने इनर 1 नोड का चयन किया है, तो क्या मेरे लिए अपने भाई-बहनों, inner2-4नोड्स तक पहुंचने का कोई तरीका है ?

Answer 1

खैर ... यकीन है ... बस अभिभावक और फिर बच्चों तक पहुंचें।

 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);
}

Comments

ध्यान दें कि jquery.siblings () परिणाम सेट से वर्तमान नोड को बाहर करता है।

— क्लेयस

जो की बहुत ही अच्छी सुविधा है!

— cgp

वास्तव में jquery में node.parentNode.childNodes [] के समतुल्य वास्तव में $ (नोड) .entent () है। बच्चे () नहीं $ (नोड) .siblings ()। यह एक अच्छी सुविधा हो सकती है लेकिन यह कष्टप्रद भी हो सकती है। आपको क्या चाहिए इस पर यह निर्भर है।

— cletus

आप नोड के साथ ELEMENT_NODE नोड्स के लिए जाँच करना चाहते हैं। क्योंकि यह आपको सफेद स्थान पाठ नोड भी देगा।

— सीमोनस्टार

कुछ नहीं, मुझे लगता है कि यह एक

— नासमझ

Answer 2

var sibling = node.nextSibling;

यह इसके तुरंत बाद भाई को लौटा देगा, या अशक्त नहीं होगा कि भाई बहन उपलब्ध हैं। इसी तरह, आप उपयोग कर सकते हैं previousSibling।

[संपादित करें] दूसरे विचार पर, यह अगला divटैग नहीं देगा , लेकिन नोड के बाद व्हॉट्सएप। बेहतर लगता है

var sibling = node.nextElementSibling;

वहाँ भी मौजूद है previousElementSibling।

Comments

— वादिम

IE9 से शुरू होता है। यह भी देखें stackoverflow.com/questions/5197825/...

— parvus

Answer 3

शीघ्र:

var siblings = n => [...n.parentElement.children].filter(c=>c!=n)

https://codepen.io/anon/pen/LLoyrP?editors=1011

एक तत्व के रूप में माता-पिता के बच्चों को प्राप्त करें, इस तत्व को फ़िल्टर करें।

संपादित करें:

और टेक्स्ट नोड्स को फ़िल्टर करने के लिए (धन्यवाद शस्त्रागार ):

var siblings = n => [...n.parentElement.children].filter(c=>c.nodeType == 1 && c!=n)

Comments

अच्छा समाधान है। हालाँकि, मैं पाठ नोड को छोड़ने के लिए नोड [ ...n.parentNode.children ].filter(c => c.nodeType == 1 && c != n)

— टाइप की

आप इसे टाइपस्क्रिप्ट के लिए कैसे संशोधित करेंगे?

— निक स्कोझारो

Answer 4

2017 से:
सीधा जवाब: element.nextElementSiblingसही तत्व भाई पाने के लिए। element.previousElementSiblingपिछले एक के लिए भी आपके पास है

यहाँ से सभी अगले भाई-बहनों को प्राप्त करना बहुत सरल है

var n = element, ret = [];
while (n = n.nextElementSibling){
  ret.push(n)
}
return ret;

Comments

इसे सभी भाई-बहनों को लौटाना चाहिए, केवल nextया नहीं previous। वास्तव में पिछड़े या आगे जाने को निर्दिष्ट करने से इस मामले में ज्यादा मदद नहीं मिलती है।

— 21

क्यों नहीं। यदि आप अगले और पिछले लेते हैं तो आप पूरी तस्वीर प्राप्त कर सकते हैं। जवाब है कि चीजों को करने का एक नया तरीका दिखाना है। और पाठकों के लिए कुछ योगदान करते हैं। बस माता-पिता को जाने के लिए और प्रत्येक तत्व को जाने और वर्तमान को फ़िल्टर करें जिसे हर कोई कर सकता है

— पेरी मिमोन

Answer 5

क्या आपने 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! == वर्तमान तत्व को बाहर करता है।

मुझे लगता है कि आप एक ही फ़ंक्शन का उपयोग कर सकते हैं, यह सब कोड वेनिला जावास्क्रिप्ट लगता है।

Answer 6

इसे करने के कुछ तरीके हैं।

या तो निम्न में से कोई एक करना चाहिए।

// 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 जावास्क्रिप्ट को देखने के लिए एक महान संसाधन है।

यहां एक उत्कृष्ट उपकरण है जो बहुत सुव्यवस्थित तरीके से jQuery कोड-बेस का खुलासा करता है। http://james.padolsey.com/jquery/

Answer 7

यहां बताया गया है कि आप पिछले, अगले और सभी भाई-बहनों (दोनों पक्षों) को कैसे प्राप्त कर सकते हैं:

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);
}

Answer 8

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>

Answer 9

jQuery

$el.siblings();

देशी - नवीनतम, एज 13 +

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

देशी (वैकल्पिक) - नवीनतम, एज 13 +

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

देशी - IE10 +

Array.prototype.filter.call(el.parentNode.children, (child) =>
  child !== el
);

Answer 10

var childNodeArray = document.getElementById('somethingOtherThanid').childNodes;

Comments

window.document.documentElement.childNodes [1] .childNodes [4] से उठाया howtocreate.co.uk/tutorials/javascript/dombasics

— Thunderboltz

क्या यह सवाल का कोई हल है?

— zahid9i

यह समस्या को हल नहीं करता है, या कम से कम स्पष्ट रूप से उपयोगी होने के लिए पर्याप्त नहीं है।

— cdeszaq

Answer 11

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
    }

Answer 12

निम्नलिखित फ़ंक्शन किसी सरणी को दिए गए तत्व के सभी भाई-बहनों को लौटाएगा।

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

केवल getSiblings()फ़ंक्शन में चयनित तत्व को पास करें क्योंकि यह केवल पैरामीटर है।

Answer 13

x1 = document.getElementById('outer')[0]
      .getElementsByTagName('ul')[1]
      .getElementsByTagName('li')[2];
x1.setAttribute("id", "buyOnlineLocationFix");