jQuery Traversing - الأشقاء


باستخدام jQuery ، يمكنك اجتياز الجوانب في شجرة DOM للعثور على أشقاء عنصر.

يشترك الأشقاء في نفس الوالد. 


عبور الجوانب في شجرة DOM

هناك العديد من توابع jQuery المفيدة لاجتياز الجوانب الجانبية في شجرة DOM:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

طريقة jQuery الأشقاء ()

تقوم siblings()الطريقة بإرجاع جميع العناصر الشقيقة للعنصر المحدد.

يعرض المثال التالي جميع العناصر الشقيقة لـ <h2>:

مثال

$(document).ready(function(){
  $("h2").siblings();
});

يمكنك أيضًا استخدام معلمة اختيارية لتصفية البحث عن الأشقاء.

يعرض المثال التالي جميع العناصر الشقيقة <h2>لتلك <p> العناصر:

مثال

$(document).ready(function(){
  $("h2").siblings("p");
});


jQuery next () الطريقة

تقوم next()الطريقة بإرجاع العنصر الشقيق التالي للعنصر المحدد.

يعرض المثال التالي الشقيق التالي لـ <h2>:

مثال

$(document).ready(function(){
  $("h2").next();
});

طريقة jQuery nextAll ()

تقوم nextAll()الطريقة بإرجاع جميع العناصر الشقيقة التالية للعنصر المحدد.

يعرض المثال التالي جميع العناصر الشقيقة التالية لـ <h2>:

مثال

$(document).ready(function(){
  $("h2").nextAll();
});

طريقة jQuery nextUntil ()

تقوم nextUntil()الطريقة بإرجاع جميع العناصر الشقيقة التالية بين وسيطين معينين.

يعرض المثال التالي جميع العناصر الشقيقة بين a <h2>و <h6>عنصر:

مثال

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

طرق jQuery prev ()، prevAll () & prevUntil ()

تعمل التوابع و prev()، تمامًا مثل الطرق المذكورة أعلاه ولكن مع وظيفة عكسية: فهي تعيد العناصر الشقيقة السابقة (الانتقال للخلف على طول العناصر الأشقاء في شجرة DOM ، بدلاً من الأمام).prevAll()prevUntil()


تمارين مسج

اختبر نفسك مع التمارين

ممارسه الرياضه:

استخدم طريقة jQuery للحصول على جميع عناصر الأشقاء لعنصر <h2>.

$("h2").();


المرجع العابر لـ jQuery

للحصول على نظرة عامة كاملة على جميع طرق jQuery Traversing ، يرجى الانتقال إلى مرجع jQuery Traversing الخاص بنا .