ال الأبوين() تبحث الطريقة في jQuery عن الأصل المباشر للمحدد المحدد. إنها وظيفة يحمل في ثناياه عوامل في jQuery. تعبر هذه الطريقة فقط مستوى واحدًا لأعلى في شجرة DOM وتعيد الأصل المباشر للعنصر المحدد.
ال الأبوين() الطريقة مشابهة ل آباء() الطريقة، حيث ينتقل كلاهما إلى شجرة DOM ويعيدان العنصر الأصلي. ولكن الفرق هو أن آباء() تعبر الطريقة مستويات متعددة في شجرة DOM وتعيد جميع الأسلاف، بما في ذلك الجد، والجد الأكبر، وما إلى ذلك للمحدد المحدد، بينما الأبوين() تعبر الطريقة مستوى واحدًا لأعلى وتعيد فقط الأصل المباشر للمحدد المحدد.
بناء الجملة
$(selector).parent(filter)
ال محدد في بناء الجملة أعلاه يمثل العنصر المحدد الذي سيتم البحث عن أصله. ال منقي في بناء الجملة أعلاه هو المعلمة الاختيارية التي تحدد تعبير المحدد، والذي يستخدم لتضييق نطاق البحث.
مثال 1
في هذا المثال، نحن لا نستخدم المعلمة الاختيارية لـ الأبوين() طريقة. يوجد هنا عنصر div الذي يحتوي على ملف ماي عنصر، عنوان h2 ، وعنصر الفقرة.
نحن نطبق الأبوين() طريقة للبحث عن أصل العنوان h2. إذا استخدمنا آباء() الطريقة بدلاً من استخدام الأبوين() الطريقة، سيتم تسليط الضوء على جميع أسلاف العنوان h2، بما في ذلك عنصر الجسم.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 10px; margin: 17px; } function fun(){ $(document).ready(function(){ $('h2').parent().css({ 'font-size': '30px', 'color': 'blue', 'border': '6px dashed blue'}); }); } div <ul> ul <h2> Heading h2 <p> Paragraph element </p> </h2> </ul> click me اختبره الآن انتاج:
بعد تنفيذ الكود أعلاه سيكون الناتج -
بعد النقر على الزر المحدد، سيكون الإخراج -
مثال2
في هذا المثال نستخدم المعلمة الاختيارية لـ الأبوين() طريقة للعثور على أصل عنصر الفقرة الأولى. يوجد هنا أكثر من عنصر فقرة واحدة ولكن يتعين علينا العثور على أصل عنصر الفقرة الأولى. لذلك، نحن نمرر المحدد الزائف ( :أولاً ) كقيمة اختيارية لـ الأبوين() طريقة.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent(':first').css({'color': 'blue', 'border': '3px dashed blue'}); }); } body div1 div2 <h2> h2 <p> Paragraph element </p> </h2> <h2> h2 <p> Paragraph element </p> </h2> click me بعد تنفيذ الكود أعلاه سيكون الناتج -
بعد النقر على الزر المحدد، سيكون الإخراج -
مثال3
في هذا المثال نستخدم المعلمة الاختيارية لـ الأبوين() طريقة للعثور على الأصل المحدد للمحدد المحدد. هنا، هناك ثلاثة عناصر فقرة ذات أصول مختلفة. نحن نجد h2 أصل عنصر الفقرة. لذلك، لتحقيق نفس الشيء علينا أن نجتاز h2 كقيمة اختيارية لـ الأبوين() طريقة.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent('h2').css({'color': 'blue', 'border': '5px dashed blue'}); }); } body div1 div2 <p> Paragraph element </p> <h2> h2 <p> Paragraph element </p> </h2> <ul> ul <p> Paragraph element </p> </ul> click me اختبره الآن انتاج:
بعد تنفيذ الكود أعلاه سيكون الناتج -
بعد النقر على الزر المحدد، سيكون الإخراج -
