تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: إدراج واستبدال العناصر في DOM


الصفحة السابقة

إدراج واستبدال العناصر في DOM


نحن هنا مهتمون بواجهة أخرى من jQuery : تعديل DOM . تسمح الطرق التي سيتم فحصها بإدراج واستبدال وحذف أي عناصر في DOM ، وبالتالي تعديل محتوى الصفحة المعروضة في المستعرض.
إدراج المحتوى
سيتم اختبار جميع الطرق التي تمت مراجعتها في هذا القسم على الكود التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> إدراج ونسخ وحذف البيانات </title>
  </head>
  <body>
    <h2 id="one">Lorem ipsum</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <hr>

    <h2 id="two">Lorem ipsum suite</h2>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <hr>

    <h2 id="three">Liste à puces</h2>
    <ul>
      <li>element 1</li>
      <li>element 2</li>
      <li>element 3</li>
      <li>element 4</li>
    </ul>      
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        //  jQuery 
        }); 
    </script>
  </body>
</html>     
توضح لك الصورة التالية كيفية ظهور الصفحة عند عدم إدراج كود jQuery .
jQuery web
هناك عدة طرق مفيدة للغاية لإدراج محتوى في التحديد أو خارجه (فيما يلي عناصر تم إرجاعها بواسطة محدد jQuery ) :
  • append() إدراج محتوى في نهاية التحديد
  • prepend() إدراج محتوى في بداية الاختيار
  • before() إدراج المحتوى قبل الاختيار
  • after() إدراج المحتوى بعد الاختيار
فيما يلي بعض الأمثلة لاستخدام هذه الأساليب.
إضافة مسافة وثلاثة علامات نجمية بعد كل عنوان <H2>

    $('h2').append(' ***');    
إضافة ثلاثة علامات نجمية ومسافة قبل كل عنوان <H2>

    $('h2').prepend('*** ');  
أضافة خط فاصل أفقي قبل العنوان <H2> #THREE

    $('#trois').before('
');
إدراج فواصل سطرين بعد كل علامة <HR>

      $('hr').after('<br><br>'); 
كما ترون ، الأمر بسيط للغاية! لذلك دعنا ننتقل.

استبدال العناصر


لاستبدال التحديد ، استخدم الطريقة replaceWith() عن طريق تحديد العنصر الجديد بين الأقواس. على سبيل المثال ، لاستبدال العلامات <hr> بفواصل أسطر ، استخدم العبارة التالية:

  $('hr').replaceWith('<br>'); 
سؤال سريع: ما هو بيان jQuery الذي ستستخدمه لاستبدال كل العناوين <h2>في المستند بالعناوين <h3>؟
لذا ، فكرة صغيرة؟ ربما كنت قد فكرت في هذه التعليمات:

  $('h2').replaceWith('<h3>');
لكن يا لها من خيبة أمل عندما نشرت المستند في متصفحك! في الواقع ، يجب أن يكون لديك شيء يشبه الصورة التالية.
jQuery web
اختفت العناوين <h2> ببساطة! هل تفهم ما حدث؟ $('h2') لم يكن المحدد محتوىً لتحديد العلامات <h2>، ولكن أيضًا محتواها وعلامة الإغلاق </h2> . تم استبدال عناوين المستوى الثاني الثلاثة بعلامة <h3>، بدون محتوى وبدون علامة إغلاق </h3>، والتي تسببت في اختفائها.
ولكن بعد ذلك ، هل نحن نواجه الفجوة الأولى في jQuery؟ بالطبع لا ! الحل هو استعراض العناصر المحددة بالطريقة each() وتنفيذ تخطي replaceWith() مخصص:

$('h2').each(function(){
  var elemH2 = $(this);
  elemH2.replaceWith('<h3>' + elemH2.text() + '</h3>');
});     
يحدد السطر الأول جميع عناصر <h2> المستند ( $('h2')) ويطبق دالة على كل واحد منهم ( each(function(){) . للحد من كتابة التعليمات البرمجية وتحسين أداءها ، يحدد السطر الثاني المتغير elemH2 ويخزن العنصر <h2> الذي تتم معالجته هناك. يطبق السطر الثالث الطريقة replaceWith() على عنصر jQuery الجاري معالجته ( elemH2.replaceWith) ويستبدلها بعلامة فتح <h3>، متبوعة بالنص الموجود في العنصر المعالج حاليًا ( elemH2.text()) وعلامة إغلاق </h3> . السطر الرابع ينهي الدالة والأسلوب each() .

إدراج العناصر


لقد تعلمت سابقًا كيفية إدراج محتوى في العناصر المحددة أو خارجها من خلال محدد jQuery . هنا ، سأريكم كيفية إدراج عناصر في شجرة DOM . الأساليب المستخدمة هي كما يلي:
  • eai.appendTo(cible) إدراج عنصر في نهاية العنصر المستهدف ؛
  • eai.prependTo(cible) إدراج عنصر في بداية العنصر المستهدف ؛
  • eai.insertBefore(cible) إدراج عنصر قبل العنصر المستهدف ؛
  • eai.insertAfter(cible) إدراج عنصر بعد العنصر المستهدف.
Eai يمثل العنصر الذي سندرجه و cible يمثل العنصر الذي سيقع الادراج قبله او بعده .
لوصف eai و cible، يمكنك استخدام محدد jQuery أو اسم عنصر أو سلسلة HTML أو كائن jQuery .
ربما كنت تتساءل عما إذا كانت الأساليب appendTo() و insertAfter() غير متكافئتان؟ وبالمثل، إذا الأساليب prependTo() و insertBefore() ليستا متكافئتين ؟
حسنًا ، appendTo() تمكن من إدراج عنصر في نهاية العنصر المستهدف ، مع البقاء داخل العنصر المستهدف ، بينما insertAfter() تمكن من ادراج عنصر بعد العنصر المستهدف. بطريقة مماثلة ، يمكن prependTo() من إدراج عنصر في بداية العنصر المستهدف و يبقى داخل الهدف ، بينما insertBefore() تمكن من إدراج عنصر قبل العنصر المستهدف.
فيما يلي بعض الأمثلة على استخدام هذه الطرق لفهمها بشكل أفضل (تستند هذه الأمثلة إلى تعليمات HTML البرمجية المقدمة في بداية هذا الفصل). يتم إدراج عبارات jQuery بعد السطر 32.
إضافة عنصر نقطي بعد العنصر الثاني

  $('<li>element 2 bis</li>').insertAfter($('li:nth-child(2)'));      
والنتيجة في الصورة التالية.
jQuery web
أضف علامة <HR> قبل كل عنوان <H2>

  $('<hr>').prependTo($('h2'));  
والنتيجة في الصورة التالية.
jQuery web
والآن ، سؤال بسيط بسيط ليجعلك تفكر في الطريقة prependTo() . برأيك ماذا ينتج البيان التالي؟

  $('<li>element 2 bis</li>').prependTo($('li:nth-child(2)'));
دون التفكير كثيرًا في الأمر ، فأنت تعتقد بالتأكيد أنه تتم إضافة شريحة " element 2 bis " قبل شريحة " element 2 ".
من أين تأتي المشكلة؟
تذكر ما قلته عن الاختلافات بين الأساليب prependTo() و insertBefore() . يقوم الأول بإدخال داخل العنصر المستهدف والثاني قبل العنصر المستهدف. بعد تنفيذ كود jQuery ، يكون كود HTML للقائمة النقطية كما يلي:

  <ul>
  <li>element 1</li>
  <li><li>element 2 bis</li>element 2</li>
  <li>element 3</li>
  <li>element 4</li>
</ul>       
غير متماسكة تمامًا من وجهة النظر الدلالية ، يتم تفسير هذا الكود بشكل خاطئ من قبل المتصفح الذي يعرضه ... شيء غير متوقع إلى حد ما! لا تلومه: في هذه الحالة ، كانت الطريقة insertBefore() أكثر ملاءمة للوضع.

نقل المحتوى


لنقل عنصر موجود في المستند، استخدم الطرق append()، prepend()، before() أو after() :
  • $('sel').append(depl);
  • $('sel').prepend(depl);
  • $('sel').before(depl);
  • $('sel').after(depl);
... حيث sel يحدد العنصر قبل أو بعده للتنقل ويمثل depl العنصر المطلوب نقله.
الطرق append() و after() متشابهة : كلاهما تمكن من نقل عنصر واحد بعد عنصر آخر. ولكن حذار ، مع append()يتم التحرك قبل علامة نهاية العنصر المحدد ، بينما after() يتم ذلك بعد هذه العلامة.
الطرق prepend() و before() هي أيضا مشابهة: كلاهما يمكن من نقل عنصر قبل عنصر آخر. ولكن حذار ، مع prepend() يتم التحرك بعد علامة البدء للعنصر المحدد ، بينما before() يتم ذلك قبل هذه العلامة.
كمثال ، خذ بعين الاعتبار الكود التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> نقل المحتوى</title>
  </head>
  <body>
    <h2>Lorem ipsum</h2>
    <p id="un">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <hr>

    <h2>Lorem ipsum suite</h2>
    <p id="deux">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <hr>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // jQuery 
        }); 
    </script>    
  </body>
</html>            
يحدد هذا الرمز عنوانين من المستوى 2 ، يتبع كل منهما فقرة نصية وفاصل أفقي ، كما هو موضح في الصورة التالية.
jQuery web
استبدل السطر 25 بالبيان التالي ، واحفظ الكود ، وقم بتحديث الصفحة في المستعرض.

    $('#deux').after($('#un'));     
والنتيجة في الصورة التالية.
jQuery web
كما ترون ، فلم يتم عرض فقرة المعرف #un بعد العلامة الأولى <h2>، ولكن بعد فقرة المعرف #deux . لذلك تم نقله من المنصب الذي شغله إلى منصبه الجديد.

تكرار العناصر


كما لاحظت من قبل ، فإن الطريقة after() (هذا صالحة أيضًا للطرق append()، prepend()و before() ) تنقل عنصرًا موجودًا إلى موضع معين في المحدد. إذا كنت لا تريد أن تحركه، ولكن تكرر عنصر القائمة عليك تطبيق طريقة clone() لمحدد، واعتمادا على التأثير المراد الوصول اليه ، اتباعه بالطريقة appendTo() ,prependTo() insertBefore() او insertAfter() .
على سبيل المثال ، سنقوم بتكرار فقرة المعرف #deux وإدراجها قبل فقرة المعرف #un . فيما يلي تعليمات الاستخدام:

    $('#deux').clone().insertBefore($('#un'));      
والنتيجة في الصورة التالية.
jQuery web
إذا كان العنصر المكرر يحتوي على واحد أو أكثر من الابناء ، فهم أيضًا جزء من الاستنساخ. سنقوم بتوضيح هذا السلوك من خلال تكرار جميع العناصر التي تشكل قائمة نقطية من التعليمات البرمجية التالية:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> تكرار العناصر </title>
  </head>
  <body>
    <h2>Lorem ipsum</h2>
    <p id="un">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <hr>

    <h2 id="trois">Liste à puces</h2>
    <ul>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
      <li>Troisième élément</li>
      <li>Quatrième élément</li>
    </ul>
    <hr>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // jQuery 
        }); 
    </script>
  </body>
</html>     
يعرض هذا الكود عنوان من المستوى 2 متبوعًا بفقرة من النص وفاصل ، ثم عنوان آخر 2 متبوعًا بقائمة نقطية مكونة من أربعة عناصر ، كما هو موضح في الصورة التالية.
jQuery web
نضيف عبارة التالية في السطر 27:

    $('ul').clone().insertBefore($('h2:first'));    
تحدد هذه العبارة العلامة <ul> ( $('ul')) و تكررها ( clone()) ، ثم تضع الاستنساخ قبل العلامة الأولى <h2> ( insertBefore($('h2:first'))) . هل اعجبتك النتيجة المرئية في الصورة التالية.
jQuery web
عندما يتم إرجاع عناصر متعددة بواسطة المحدد ، فإنها كلها جزء من الاستنساخ. على سبيل المثال ، لتحديد ملخص المستند من خلال تضمين جميع عناوين المستوى 2 ، يمكنك استخدام الإرشادات التالية:

  $('<h1>Sommaire</h1>').insertBefore($('h2:first'));
  $('h2').clone().insertAfter($('h1'));         
يدرج البيان الأول عنوان المستوى الأول " sommaire " ( $('<h1>Sommaire</h1>')) قبل عنوان المستوى الأول من المستند ( insertBefore($('h2:first'))) .
تقوم العبارة الثانية بتحديد جميع عناوين المستوى 2 في المستند ( $('h2')) ، clone ( clone()) ، وإدراجها بعد عنوان المستوى 1 ( insertAfter($('h1'))) .
والنتيجة في الصورة التالية.
jQuery web

احاطة العناصر


تسمح لك الطريقة wrap() بتطويق عنصر بواحد أو أكثر من العناصر الأخرى. هنا بناء الجملة:

    $('sel').wrap('elwrap');     
حيث sel هو محدد jQuery و elwrap ويمثل العنصر أو العناصر (الفتح والإغلاق) للإدراج حول التحديد. يمكن أن تكون هذه العناصر هي كود HTML أو محدد أو عنصر jQuery أو عنصر DOM . مهما كانت طبيعتها ، فهي تؤطر العناصر التي ستحيط بها.
لفهم كيفية عمل هذه الطريقة ، سوف نفكر في الكود التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Wrap</title>
  </head>
  <body>
    <h2 id="trois">Liste à puces</h2>
    <ul>
      <li>Premier élément</li>
      <li>Deuxième élément</li>
      <li>Troisième élément</li>
      <li>Quatrième élément</li>
    </ul>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
        }); 
    </script>    
  </body>
</html>    
يعرض هذا الكود عنوان المستوى 2 وقائمة نقطية من أربعة عناصر. افترض أنك تريد عرض عناصر القائمة النقطية بخط مائل. للقيام بذلك ، قم ببساطة بإحاطتهم بالعلامة <i> باستخدام الطريقة wrap() . تضاف عبارة البيان التالية 19:

  $('li').wrap('<i></i>');     
احفظ المستند واعرضه في متصفحك. يتم الآن عرض العناصر الأربعة في القائمة النقطية بخط مائل ، كما هو موضح في الصورة التالية.
jQuery web
وإذا كنت ترغب في عرض عناصر القائمة باللون الأحمر والعريض والمائل والمسطر ، فستستخدم التعليمات التالية:

  $('li').wrap('<font color="red"><b><i><u></u></i></b></font>');      
دعنا نرفع السرعة باستخدام وظيفة لتخصيص العناصر المدرجة حول التحديد.
تحتوي الطريقة wrap() على نوعين:
  • wrapInner() لتطويق محتوى عنصر بعنصر آخر تم إنشاؤه ؛
  • wrapAll() لتطويق العناصر المحددة بعنصر آخر تم إنشاؤه سريعًا.
لتوضيح كيفية عمل الطريقة wrapInner() ، دعنا نفترض أن صفحة HTML تحدد الفقرة التالية:

  <p>نص الفقرة</p> 
إذا قمت بتشغيل عبارة jQuery التالية:

  $('p').wrapInner('<i></i>');
... تتحول الفقرة إلى:

  <p><i> نص الفقرة </i></p> 
إذا كنت قد استخدمت الطريقة wrap() بدلاً من ذلك:

  $('p').wrap('<i></i>');       
... الفقرة قد تحولت إلى:

  <i><p> نص الفقرة</p></i>     
لتوضيح كيفية تشغيل الطريقة wrapAll() ، سنكتب الكود التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Wrap</title>
    <style type="text/css">
      div { background: red;}
    </style>
  </head>
  
  <body dir= "rtl">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    نص معزول
    <p>Paragraph 4</p>
    نص اخر معزول

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // jQuery 
        }); 
    </script>    
  </body>
</html>          
إذا قمت بتشغيل هذا الكود في المتصفح ، فستحصل على الصورة التالية.
jQuery web
كما ترون ، تظهر الفقرات والنص المعزول بالترتيب الذي تم تعريفهما به. سنقوم الآن بتطبيق الطريقة wrapAll()على الفقرات (أي على العلامات <p>) من المستند ونحيط بها بعلامة <div> . لقد تم تعريف النمط div في المستند: سيكون لعناصر هذا النمط خلفية حمراء. أدخل البيان التالي في السطر 22:

  $('p').wrapAll('<div></div>');
احفظ المستند وقم بتحديث العرض في المستعرض. يجب أن تحصل على الصورة التالية.
jQuery web
لقد تم جمع الفقرات وأحيط بها علامة <div> . تم تحويل كود HTML على النحو التالي:

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
</div>
نص معزول نص اخر معزول

حذف العناصر


تتيح لك الطريقة remove() حذف العناصر التي يتم إرجاعها بواسطة محدد jQuery . على سبيل المثال ، لإزالة جميع العناوين <h2>من المستند ، استخدم هذا البيان:

    $('h2').remove();
أو لإزالة الرمز النقطي الثاني من قائمة المستندات النقطية ، استخدم العبارة التالية:

    $('li:nth-child(2)').remove();
مثال أخير. لحذف جميع الفقرات التي تحتوي على كلمة "java" ، استخدم العبارة التالية:

    $('p').remove(':contains("java")');
  • لإدراج المحتوى في مستند، يمكنك استخدام الأساليب append()، prepend()، before() و after() . لاستبدال العناصر ، سوف تستخدم الطريقة replaceWith() . لإدراج عناصر في DOM، يمكنك استخدام الأساليب appendTo()، prependTo()، insertBefore() و insertAfter() . وأخيرا، لتكرار عناصر ، يمكنك استخدام الطريقة clone() ، ترتبط طريقة appendTo()، prependTo()، insertBefore() أو insertAfter() .
  • طرق wrap()، wrapInner() و wrapAll() تستخدم لإحاطة عنصر واحد أو أكثر من العناصر الأخرى التي تم إنشاؤها.
  • لحذف عنصر ، نستخدم الطريقة remove() .