ভাইবোন নোডগুলি নির্বাচন করার কোনও উপায় আছে?

Question 1

কিছু কার্য সম্পাদনের কারণে, আমি নির্বাচিত নোডের কেবল ভাইবোন নোডগুলি বেছে নেওয়ার জন্য একটি উপায় অনুসন্ধান করার চেষ্টা করছি।

উদাহরণ স্বরূপ,

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

যদি আমি অভ্যন্তরীণ নোডটি নির্বাচন করি তবে এর ভাইবোন, inner2-4নোডগুলি অ্যাক্সেস করার কোনও উপায় কি আমার জন্য রয়েছে ?

Question 2

ঠিক আছে ... নিশ্চিত ... কেবলমাত্র পিতামাতার এবং তারপরে বাচ্চাদের অ্যাক্সেস করুন।

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

Question 3

var sibling = node.nextSibling;

এটি তার ঠিক পরে ভাইবোনকে ফিরিয়ে দেবে, বা আর কোনও ভাইবোন উপলব্ধ নেই। তেমনি, আপনি ব্যবহার করতে পারেন previousSibling।

[সম্পাদনা] দ্বিতীয় চিন্তায়, এটি পরবর্তী divট্যাগটি দেবে না , তবে নোডের পরে সাদা স্থান ace আরও ভাল বলে মনে হচ্ছে

var sibling = node.nextElementSibling;

এছাড়াও আছে একটি previousElementSibling।

Question 4

দ্রুত:

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)

Question 5

2017 থেকে:
সরল উত্তর: element.nextElementSiblingসঠিক উপাদান সহোদর পেতে। আপনি element.previousElementSiblingআগের এক জন্য আছে

এখান থেকে পরের সমস্ত ভাইবোন পাওয়া খুব সহজ

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

Question 6

আপনি কি 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 উপাদানটি এইচটিএমএল নোড এবং এন! == বর্তমান উপাদানটি বাদ দেয় কিনা তা পরীক্ষা করে দেখুন।

আমি মনে করি আপনি একই ফাংশনটি ব্যবহার করতে পারেন, সমস্ত কোডটি ভ্যানিলা জাভাস্ক্রিপ্ট বলে মনে হয়।

Question 7

এটি করার কয়েকটি উপায় রয়েছে।

নিম্নলিখিতগুলির যে কোনও একটিটি কৌশলটি করা উচিত।

// 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 কোড-বেস গ্রেড এ জাভাস্ক্রিপ্ট পর্যবেক্ষণের জন্য একটি দুর্দান্ত উত্স।

এখানে একটি দুর্দান্ত সরঞ্জাম যা jQuery কোড-বেসকে খুব সুবিন্যস্ত উপায়ে প্রকাশ করে। http://james.padolsey.com/jquery/

Question 8

আপনি কীভাবে আগের, পরবর্তী এবং সমস্ত ভাইবোন (উভয় পক্ষ) পেতে পারেন তা এখানে:

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

Question 9

ব্যবহারের document.querySelectorAll () এবং loops এবং পুনরাবৃত্তির

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>

স্নিপেট প্রসারিত করুন

Question 10

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

Question 11

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

Question 12

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
    }

Question 13

নিম্নলিখিত ফাংশন প্রদত্ত উপাদানটির সমস্ত ভাইবোন সমন্বিত একটি অ্যারে প্রদান করবে।

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

নির্বাচিত উপাদানটিকে getSiblings()কেবলমাত্র পরামিতি হিসাবে ফাংশনে পাস করুন ।

Question 14

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