jQuery 3.3

.add()




jquery

.add (selector) إرجاع: jQuery

الوصف ؛: إنشاء كائن جديد jQuery مع العناصر المضافة إلى مجموعة من العناصر المتطابقة.

  • الإصدار المضاف: 1.0 .add (محدد)

    • منتخب
      النوع: Selector
      سلسلة تمثل تعبير محدد للعثور على عناصر إضافية لإضافتها إلى مجموعة العناصر المتطابقة.
  • الإصدار المضاف: 1.0 .add (عناصر)

    • عناصر
      النوع: Element
      عنصر واحد أو أكثر لإضافته إلى مجموعة العناصر المتطابقة.
  • الإصدار المضاف: 1.0 .add (html)

    • أتش تي أم أل
      النوع: htmlString
      جزء HTML لإضافته إلى مجموعة العناصر المتطابقة.
  • الإصدار المضاف: 1.3.2 .add (التحديد)

    • اختيار
      النوع: jQuery
      كائن jQuery موجود لإضافته إلى مجموعة العناصر المتطابقة.
  • الإصدار المضاف: 1.4 .add (المحدد ، السياق)

    • منتخب
      النوع: Selector
      سلسلة تمثل تعبير محدد للعثور على عناصر إضافية لإضافتها إلى مجموعة العناصر المتطابقة.
    • سياق الكلام
      النوع: Element
      النقطة في المستند الذي يجب أن يبدأ فيه المطابق في المطابقة ؛ مشابهة لوسيطة السياق الخاصة بطريقة $(selector, context) .

وبالنظر إلى كائن jQuery يمثل مجموعة من عناصر DOM ، تقوم طريقة .add() بإنشاء كائن jQuery جديد من اتحاد تلك العناصر وتلك التي تم تمريرها إلى الطريقة. يمكن أن تكون الوسيطة لـ .add() حد كبير أي شيء يقبله $() ، بما في ذلك تعبير محدد jQuery ، أو مراجع لعناصر DOM ، أو مقتطف HTML.

لا تفترض أن هذا الأسلوب بإلحاق العناصر إلى المجموعة الموجودة بالترتيب يتم تمريرها إلى الأسلوب .add() . عندما تكون كافة العناصر أعضاء في نفس المستند ، سيتم فرز المجموعة الناتجة من .add() بترتيب المستند؛ وهذا هو ، حسب مظهر كل عنصر في المستند. إذا كانت المجموعة تتكون من عناصر من مستندات مختلفة أو تلك الموجودة في أي مستند ، فإن ترتيب الفرز غير محدد. لإنشاء كائن jQuery بعناصر في ترتيب معرّف بشكل جيد وبدون فرز $(array_of_DOM_elements) الحمل ، استخدم التوقيع $(array_of_DOM_elements) .

يمكن استخدام المجموعة المحدّثة من العناصر بطريقة متسلسلة (متسلسلة) ، أو تخصيصها لمتغير لاستخدامه لاحقًا. فمثلا:

$( "p" ).add( "div" ).addClass( "widget" );
var pdiv = $( "p" ).add( "div" );

لن يؤدي التالي إلى حفظ العناصر المضافة ، لأن الطريقة .add() تنشئ مجموعة جديدة وتترك المجموعة الأصلية في pdiv بدون تغيير:

var pdiv = $( "p" );
pdiv.add( "div" ); // WRONG, pdiv will not change

فكر في صفحة تحتوي على قائمة بسيطة وفقرة تليها:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<p>a paragraph</p>

يمكننا تحديد عناصر القائمة ثم الفقرة باستخدام إما محدد أو مرجع لعنصر DOM نفسه .add() أسلوب .add() :

$( "li" ).add( "p" ).css( "background-color", "red" );

أو:

$( "li" ).add( document.getElementsByTagName( "p" )[ 0 ] )
  .css( "background-color", "red" );

نتيجة هذه المكالمة هي خلفية حمراء خلف كل العناصر الأربعة. باستخدام مقتطف HTML .add() أسلوب .add() (كما هو الحال في النسخة الثالثة) ، يمكننا إنشاء عناصر إضافية على الطاير وإضافة تلك العناصر إلى مجموعة العناصر المتطابقة. لنفترض على سبيل المثال أننا نريد تغيير خلفية عناصر القائمة إلى جانب فقرة تم إنشاؤها حديثًا:

$( "li" ).add( "<p id='new'>new paragraph</p>" )
  .css( "background-color", "red" );

على الرغم من إنشاء الفقرة الجديدة وتغيير لون الخلفية الخاص بها ، إلا أنها لا تظهر في الصفحة. لوضعها على الصفحة ، يمكننا إضافة أحد أساليب الإدراج إلى السلسلة.

اعتبارًا من jQuery 1.4 سيتم دوماً إرجاع النتائج من .add () في ترتيب المستندات (بدلاً من سلسلة بسيطة).

ملاحظة: لعكس .add() يمكنك استخدام .not( elements | selector ) لإزالة عناصر من نتائج jQuery أو .end() للعودة إلى التحديد قبل إضافتك.

أمثلة:

يجد جميع divs ويجعل الحدود. ثم يضيف كل الفقرات إلى كائن jQuery لتعيين خلفياتها باللون الأصفر.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
  }
  p {
    clear: left;
    font-weight: bold;
    font-size: 16px;
    color: blue;
    margin: 0 10px;
    padding: 2px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<p>Added this... (notice no border)</p>
 
<script>
$( "div" ).css( "border", "2px solid red" )
  .add( "p" )
  .css( "background", "yellow" );
</script>
 
</body>
</html>

عرض:

يضيف المزيد من العناصر ، يطابقها التعبير المحدد ، إلى مجموعة العناصر المتطابقة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
<span>Hello Again</span>
 
<script>
$( "p" ).add( "span" ).css( "background", "yellow" );
</script>
 
</body>
</html>

عرض:

يضيف المزيد من العناصر ، التي تم إنشاؤها على الطاير ، إلى مجموعة العناصر المتطابقة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
 
<script>
$( "p" ).clone().add( "<span>Again</span>" ).appendTo( document.body );
</script>
 
</body>
</html>

عرض:

لإضافة عنصر أو أكثر إلى مجموعة العناصر المتطابقة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
<span id="a">Hello Again</span>
 
<script>
$( "p" ).add( document.getElementById( "a" ) ).css( "background", "yellow" );
</script>
 
</body>
</html>

عرض:

يوضح كيفية إضافة عناصر (أو الدفع) إلى مجموعة موجودة

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Hello</p>
<span id="a">Hello Again</span>
 
<script>
var collection = $( "p" );
// Capture the new collection
collection = collection.add( document.getElementById( "a" ) );
collection.css( "background", "yellow" );
</script>
 
</body>
</html>

عرض: