jQuery تدفق - التوأم (siblings)

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

العناصر التوأم هي العناصر التي تتشارك نفس العنصر الأم.

في هذا الفصل، سنشرح كيفية استكشاف شجرة DOM بشكل أفقي.

استكشاف شجرة DOM بشكل أفقي

لدينا طرق jQuery التالية لاستكشاف شجرة DOM بشكل أفقي:

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

في هذا الفصل، سنوضح كيفية استخدام كل طريقة.

مثال jQuery siblings()

jQuery siblings()يستعيد هذا الدالة جميع العناصر التوأم للعنصر المحدد.

الامثلة التالية تعود بجميع العناصر التوأم للعناصر <li> التي تحتوي على الصنف "middle":

$("document").ready(function(){
　　$("li.middle").siblings().css("background-color", "lightgreen");
});

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

الامثلة التالية تعود بجميع العناصر التوأم للعناصر li التي تحتوي على الصنف "bold":

$("document").ready(function(){
　　$("li").siblings(".bold").css("background-color", "lightgreen");
});

مثال jQuery next()

jQuery next()يستعيد هذا الدالة العنصر التوأم التالي للعنصر المحدد.

الامثلة التالية تعود بالعنصر التوأم التالي للعنصر div:

$("document").ready(function(){
　　$("div").next().css("background", "lightblue");
});

مثال jQuery nextAll()

jQuery nextAll()يستعيد هذا الدالة جميع العناصر التوأم التالية للعنصر المحدد.

الامثلة التالية تعود بجميع العناصر التوأم التالية للعناصر div:

$("document").ready(function(){
　　$("div").nextAll().css("background", "lightblue");
});

مثال jQuery prev()

jQuery prev()يستعيد هذا الدالة العنصر التوأم السابق للعنصر المحدد، والذي يقع بجانبه.

الامثلة التالية تعود بالعنصر التوأم السابق للعنصر div:

$("document").ready(function(){
　　$("div").prev().css("background", "lightblue");
});

مثال jQuery prevAll()

jQuery prevAll()يستعيد هذا الدالة جميع العناصر التوأم السابقة للعنصر المحدد.

الامثلة التالية تعود بجميع العناصر التوأم السابقة للعناصر div:

$("document").ready(function(){
　　$("div").prevAll().css("background", "lightblue");
});

jQuery nextUntil()和prevUntil()方法

jQuery nextUntil()يستعيد هذا الطريقة جميع العناصر الإخوة بين اثنين من المعلمات المقدمة.

jQuery prevUntil()يستعيد هذا الطريقة جميع العناصر الإخوة بين اثنين من المعلمات المقدمة.

في هذا المثال، يتم استعادة جميع الإخوة التاليين لـ <dt id="term-2"> حتى <dt> التالي:

$("document").ready(function(){
　　$("#term-2").nextUntil("dt").css("background-color", "coral");
});

في هذا المثال، يتم استعادة جميع الإخوة السابقين لـ <dt id="term-2"> حتى <dt> السابق:

$("document").ready(function(){
　　$("#term-2").prevUntil("dt").css("background-color", "coral");
});

مرجع التتبع jQuery

للحصول على معلومات كاملة حول طرق التتبع، يرجى زيارةمرجع التتبع jQuery。