الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

حساب عدد الـ children في الـ node

بدأه Alrashid في 10 يناير 2012 · 3 رد · 768 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم ..

يشرفني ان انظم الى هذا المنتدى الجيد الذي ادين له و لأعضاءه بالفضل حتى دون علمهم ..

كنت ولازلت استفيد من مايطرح هنا كثيرا .. واليوم قررت المشاركة معكم لأفيد واستفيد .. فالنقاش في المواضيع يفتح الكثير من الآفاق للسائل والمسئول آملا ان يكون موضوعي في مكانه الصحيح ..

أود النقاش حول اشكالية بسيطة وهي كيفية حساب عدد الـ children الموجودة في node معينة مثلا عند الضغط على اي عنصر ( Section مثلا ) في المستند التالي:

<body onload="init();">
    <h1>DOM </h1>
    <article>
      <section>
        <h2>1st Section</h2>
        <p> content </p>
      </section>
      <section>
        <h2>2nd Section</h2>
        <p>
           content 
        </p>
      </section>
    </article>
    <footer>Some text</footer>
  </body>

سوف يظهر عدد الاولاد هنا خمسه ويفترض فيه ان يكون اربعه بإستخدام طبعا الكود التالي .. 

function whatChildren( e ) {
        var myChildren = e.target.childNodes;
        alert( "this node is of node-name " + e.target.nodeName + " and has " + myChildren.length + " children" );
      }
function init() {
        var tmp = document.body.childNodes;
        alert( "this document has " + tmp.length + " elements" );
        for( var i=0; i< tmp.length; i++ ) {
          tmp[ i ].addEventListener( 'click', whatChildren, true );
        }
      }

الاشكالية هو انه يعتبر التالي

      <section>
        <h2>1st Section</h2>
        <p> content </p>
      </section>

محتلفا عن الآتي من حيث عدد الـ children :

      <section>
<h2>1st Section</h2><p> content </p>
      </section>

طبعا السبب انا فسرته انه قاعد يحسب التكست نود او المساحات البيضاء او السطر الجديد لست متأكد أيهم .. مارأيكم اين السبب ..

#2

بالنسبة للمثال الي وضعته فالبرامج يحسب جميع النود بجميع انواعها

طبعا ً انواع النود تختلف في خاصية اسمها nodeType تحدد لك ايش نوع النود ، ترجع لك القيمة عدديه ، اذا رجعت لك القيمة 1 فهذا يعني انو نوع النود عبارة عن نود فعليه اي ليس وسم اغلاق او شي اخر

جرب هذا الكود راح يحسب لك عدد الـ Children الفعليين الموجودين داخل الـ Parent ، الموضوع كله في الـ nodeType 

<script>
	function whatChildren( e ) {
		realNode = 0;
		i        = 0;
		var myChildren = e.target.childNodes;
		while(i < myChildren.length)
		{ 
			if(myChildren.nodeType == 1)
			{
				realNode++;
			}
			i++;
		}
		alert( "this node is of node-name " + e.target.nodeName + " and has " + realNode + " children" );
      }
	function init() {
        var tmp = document.body.childNodes;

		var realNode = 0;
		var i        = 0;
		while(i < tmp.length)
		{ 
			if(tmp.nodeType == 1)
			{
				realNode++;
			}
			i++;
		}

        alert( "this document has " + realNode + " elements" );
        for( var i=0; i< tmp.length; i++ ) {
          tmp[ i ].addEventListener( 'click', whatChildren, true );
        }
      }

</script>
<body onload="init();">
    <h1>DOM </h1>
    <article>
	article :
      <section>
        1st Section
        <p> content1 </p>
      </section>
      <section>
		2nd Section
        <p>
           content 
        </p>
		<p> content2 </p>
      </section>
    </article>
    <footer>Some text</footer>
  </body>

تم تعديل هذه المشاركة بواسطة M.B.O في 12 يناير 2012 في 00:44

1

M.B.O

Mohamed Bin Othman

إبن المكلا

يابني البشر ماذا فعلتم بالبشر !!

إسـألـنـي

#3

حياك الله اخي وعافاك على مجهودك ..

نعم الـ nodeType هي مربط الفرس ولكن الكود اللي انت كتبت ماراح يحسب كل الـ children التابع للنود section خلني اشرح لك مقصدي ممكن طرحت التساؤل بشكل خاطيء:

<section>
        <p>content</p>
         <p>content2</p>
      </section>

في الكود السابق يفترض يتبع ال section اربعه children (اللي هم <p> و النص الموجود والـ <p> الثانية والنص الموجود فيها ) داخلها ولكن الكود الموجود في الموضوع اعلاه يعطي خمسه , فيما لو لو حطيتهم في نفس السطر يعطيني اربعه بالشكل التالي :

<section>
        <p>content</p><p>content2</p>
 </section>

ولو حطيت بين الـ p tags مسافه يحسبهم خمسه ..

يعني باختصار المشكلة في السبيس الموجود بينهم انا كتبت حل منطقيا اتوقع صحيح بس فعليا ما اشتغل معي :

function whatChildren( e ) {
       //var toBeRemoved=  /^\s+$/;
        var myChildren = e.target.childNodes;
        var length=myChildren.length;
        var realLength=myChildren.length;
        for(i=0; i < length ; i++)
          {
            if(myChildren.nodeType == 3 && /\S/.test(myChildren.nodeValue) ){
              //if(/\S/.test(myChildren.nodeValue)){
              myChildren.removeChild(myChildren);
              i--;
              realLength--;
              //alert(realLength);
              //document.write(realLength);
            }//end if
           else if( myChildren.nodeType == 1){
           whatChildren ;
           }// end else   
        }//end for
        alert( "this node is of node-name " + e.target.nodeName + " and has " +myChildren.length + " children" );
      }// end function 
      function init() {
        var tmp = document.body.childNodes;
        alert( "this document has " + tmp.length + " elements" );
        for( var i=0; i< tmp.length; i++ ) {
          tmp[ i ].addEventListener( 'click', whatChildren, true );
        }
      }
    </script>
#4

استبدل السطر

                        if(tmp.nodeType == 1)

بــ

                        if(tmp.nodeType !=3)

ملاحظة 3 تعني مسافة (حرف space )

مواضيع مشابهة