ازاي ممكن اختار after و before في jquery

مرحباً بك،

كل من after و before يعتبران عناصر زائفة و هذه العناصر الزائفة لا تنتمي إلى ال Dom في الحقيقة، لذلك لا يمكن تحديدها أو إختيارها سواء بإستخدام جافاسكربت أو مكتبة جيكويري هناك بعض الطرق لتغيير شيء في العناصر الزائفة و ذلك بإستخدام ال data attributes من خلال العنصر الذي تريد ان تعمل عليه hover بحيث أن العنصر الزائف يأخذ القيمة من خلال قيمة ال data attribute و قد تم شرح الطريقة من خلال هذا الرابط:

لكن بما أنك تريد تحريك (animate) العنصر الزائف فأقترح تطبيق التحريك على عنصر حقيقي ك (span) مثلاً ،

أو يمكنك إستخدام خصائص ال css3 و ستجد في هذا الرابط بعض الشرح:

بالتوفيق.

مرحبا أحمد،

(( كتبت الأمثلة في رد التعليق بسبب عدم عمل التنسيق هنا))

أول ملاحظة: عليك الانتباه أنه عليك وضعع نقطتين مزدوجة :: وليس واحدة : عند استخدامهم في تنسيقات CSS.

ثانيا: لايمكننا الوصول ل after و before بهذه الطريقة ضمن محدد وصول jQuery لأنهما لا يوضعان في DOM

Document Object Model وهي البنية الشجرية التي تمثل صفحة HTML أي لا تعتبر عناصر مستقلة HTML element.

في jQuery تتحول after & before إلى دالة (function)للغرض(HTML element) الذي نريد الوصول إلية عن طريق المحددات Selector

$(selector).before( content );

هنا يمثل selector محدد الوصل الخاص ب class أو id لعنصر ما. أما content يمثل المحتوى الذي سنحشره قبل أو بعد العنصرالمحدد حسب الشيفرة.

يمكنك استخدامها حسب الأمثلة: مثال أول:

$(document).ready(function(){ $("h1").before( "Text added before h1" ); }); Heading

مثال ثاني:

$(document).ready(function(){ $("h1").after( "Text added after h1 " ); }); Heading

مثال ثالث: وتمكننا أيضا من تبديل مواقع العناصر بين بعضها :

توثيق موسوعة حسوب :

أمثلة لتصاميم جميلة باستخدام after & before

بالتوفيق

Before

After