متد before در جی کوئری

متد before در jQuery محتوای انتخاب‌شده را پیش از هر عنصر هدف قرار می‌دهد. به بیان ساده، اگر یک پاراگراف را انتخاب کنید و before را روی آن اجرا کنید، محتوای تازه در ساختار صفحه و پیش از آن پاراگراف قرار می‌گیرد؛ نه درون آن و نه بعد از آن.

برای استفاده درست از این متد باید انتخابگر، محتوای ورودی و زمان اجرای کد را در نظر بگیرید. نکته‌های زیر کاربرد روزمره before را روشن می‌کنند و کمک می‌کنند آن را با متدهایی که جای دیگری از صفحه محتوا می‌گذارند اشتباه نگیرید.

انتخابگر یا selector عنصری را مشخص می‌کند که محتوای تازه باید پیش از آن قرار گیرد. برای نمونه، انتخابگر $("p") همه پاراگراف‌هایی را که با تگ <p> ساخته شده‌اند هدف می‌گیرد. اگر فقط یک پاراگراف مدنظر است، بهتر است انتخابگر دقیق‌تری مانند شناسه یا کلاس آن به کار ببرید.

انتخابگرهای عمومی ممکن است چند عنصر را هم‌زمان پیدا کنند. در چنین حالتی before روی هر عنصر انتخاب‌شده اعمال می‌شود؛ پس نتیجه می‌تواند در چند جای صفحه تکرار شود. برای جلوگیری از درج ناخواسته، ابتدا بررسی کنید انتخابگر به همان تعداد عناصر موردنظر شما دسترسی دارد.

برای مثال، اگر صفحه چند پاراگراف داشته باشد و تنها بخواهید پیش از پیام راهنما محتوا اضافه کنید، به آن پاراگراف یک شناسه اختصاص دهید و همان شناسه را انتخاب کنید. این روش، کنترل بیشتری نسبت به انتخاب همه تگ‌های پاراگراف فراهم می‌کند.

پارامتر content مشخص می‌کند چه چیزی درج شود. این مقدار می‌تواند یک رشته متنی ساده یا قطعه‌ای از HTML باشد. بنابراین می‌توانید یک پیام کوتاه، یک تگ عنوان یا حتی مجموعه‌ای از عناصر HTML را پیش از عنصر انتخاب‌شده قرار دهید.

وقتی رشته شامل تگ HTML باشد، مرورگر آن را به‌عنوان نشانه‌گذاری تفسیر می‌کند. برای نمونه، رشته "<strong>توجه</strong>" یک واژه پررنگ‌شده ایجاد می‌کند. اگر قصد دارید رشته‌ای را بدون تفسیر به‌عنوان HTML نمایش دهید، آن را با دقت مدیریت کنید و از روش مناسب برای درج متن استفاده کنید.

این تفاوت هنگام درج داده‌هایی که از کاربر یا منبع بیرونی دریافت شده‌اند اهمیت بیشتری دارد. داده‌های نامطمئن را مستقیماً به‌صورت HTML وارد صفحه نکنید؛ ابتدا آن‌ها را اعتبارسنجی و پاک‌سازی کنید تا از تفسیر ناخواسته کد و مشکلات امنیتی جلوگیری شود.

جایگاه درج، تفاوت اصلی before با برخی متدهای دیگر jQuery است. محتوای تازه در ساختار صفحه به‌عنوان محتوایی هم‌سطح با عنصر هدف قرار می‌گیرد و پیش از آن می‌آید. خود عنصر هدف باقی می‌ماند و محتوای داخلی آن با این عملیات جایگزین نمی‌شود.

اگر قصد دارید متن جدید درون یک پاراگراف قرار بگیرد، before انتخاب مناسبی نیست؛ در آن موقعیت باید از روشی استفاده کنید که محتوای داخل عنصر را تغییر دهد یا در ابتدای آن محتوا بگذارد. اگر هدف افزودن محتوا پس از عنصر باشد، متد after به جایگاه موردنظر نزدیک‌تر است.

برای مثال، برای نمایش برچسبی پیش از یک پاراگراف توضیحی، before می‌تواند انتخاب درستی باشد. اما برای افزودن جمله‌ای به انتهای همان پاراگراف، باید راهکاری متناسب با محتوای داخلی عنصر انتخاب کنید.

کدی که before را اجرا می‌کند باید زمانی فراخوانی شود که عناصر موردنظر در صفحه وجود داشته باشند. اگر اسکریپت پیش از ساخته‌شدن پاراگراف‌ها اجرا شود، انتخابگر ممکن است هنوز عنصری برای هدف‌گیری پیدا نکند و در نتیجه چیزی درج نشود.

در مثال‌های آموزشی، کد معمولاً داخل رویدادی مانند کلیک دکمه قرار می‌گیرد. در این حالت، کاربر با کلیک خود اجرای دستور را آغاز می‌کند. البته باید مطمئن شوید فایل jQuery بارگذاری شده و دکمه و عنصر هدف نیز در صفحه حضور دارند.

یک سناریوی ساده این است که با کلیک روی دکمه، پیام راهنما پیش از یک پاراگراف نمایش داده شود. اگر با کلیک‌های پیاپی پیام تکراری ایجاد می‌شود، منطق برنامه را طوری تنظیم کنید که پیش از افزودن پیام جدید وجود نسخه قبلی بررسی شود.

درج موفق محتوا به‌تنهایی کافی نیست؛ محتوای تازه باید از نظر معنایی و دیداری با صفحه هماهنگ باشد. برای مثال، اگر یک هشدار به ابتدای بخش اضافه می‌کنید، نوع عنصر، متن قابل فهم و شیوه نمایش آن را طوری انتخاب کنید که با محتوای اطراف تداخل نداشته باشد.

همچنین به ساختار HTML توجه کنید. قرار دادن یک عنصر نامتناسب درون ساختارهای محدودشده ممکن است باعث شود مرورگر صفحه را متفاوت از انتظار نمایش دهد. پس از درج محتوا، صفحه را در اندازه‌های مختلف بررسی کنید و مطمئن شوید پیام جدید جای عناصر مهم را نمی‌گیرد.

در پروژه‌های بزرگ‌تر، بهتر است مسئولیت تغییر DOM در یک تابع مشخص متمرکز شود. این کار عیب‌یابی را آسان‌تر می‌کند و احتمال افزودن تکراری یا ناخواسته محتوا را کاهش می‌دهد.

ساختار پایه این متد ساده است: ابتدا عنصر هدف را با یک انتخابگر مشخص می‌کنید و سپس محتوای موردنظر را به before می‌دهید. در نمونه زیر، selector و content نام‌های توضیحی برای بخش‌های دستور هستند و باید با انتخابگر و محتوای واقعی جایگزین شوند.

$( "selector" ).before( content );

در این دستور، پرانتزهای متد محل دریافت مقدار محتوا هستند. سمی‌کالن پایان دستور در بسیاری از نمونه‌ها برای روشن‌بودن انتهای خط نوشته می‌شود. در کدهای واقعی، شکل دقیق رشته محتوا به چیزی بستگی دارد که می‌خواهید در صفحه نمایش دهید.

در مثال زیر، کلیک روی دکمه باعث می‌شود یک پاراگراف با متن Hello world! پیش از پاراگراف‌های صفحه قرار بگیرد. انتخابگر $("p") تمام پاراگراف‌های موجود را انتخاب می‌کند؛ بنابراین اگر چند پاراگراف داشته باشید، محتوا پیش از هرکدام درج می‌شود.

$("button").click(function() {
  $("p").before("<p>Hello world!</p>");
});

در این قطعه کد، متد click() تابعی را به رویداد کلیک دکمه متصل می‌کند. هنگامی که رویداد رخ دهد، دستور داخل تابع اجرا می‌شود و before قطعه HTML را پیش از عناصر منطبق با انتخابگر پاراگراف قرار می‌دهد.

برای آزمایش دقیق‌تر، می‌توانید به‌جای هدف‌گرفتن همه پاراگراف‌ها، یک کلاس یا شناسه مشخص را انتخاب کنید. همچنین اگر قرار است کاربر چند بار روی دکمه کلیک کند، بررسی کنید که آیا تکرار پیام مطلوب است یا باید از ایجاد نسخه‌های تکراری جلوگیری شود.

در jQuery چند روش برای افزودن یا تغییر محتوا وجود دارد. تفاوت اصلی آن‌ها به جایگاه درج مربوط می‌شود: before و after در دو سوی عنصر هدف محتوا می‌گذارند، در حالی که روش‌هایی مانند prepend و append محتوا را درون عنصر قرار می‌دهند.

پیش از انتخاب متد، مشخص کنید محتوای تازه باید هم‌سطح عنصر هدف باشد یا بخشی از محتوای داخلی آن. این تصمیم کوچک، ساختار DOM و نتیجه‌ای را که کاربر در صفحه می‌بیند تغییر می‌دهد.

اگر after یا before نتیجه‌ای در صفحه نشان نمی‌دهد، ابتدا مطمئن شوید jQuery بارگذاری شده و کد پس از آماده‌شدن عناصر موردنظر اجرا می‌شود. سپس انتخابگر را بررسی کنید؛ اشتباه تایپی در نام کلاس یا شناسه می‌تواند باعث شود هیچ عنصری انتخاب نشود.

اگر محتوا چند بار ظاهر می‌شود، بررسی کنید انتخابگر چند عنصر را برمی‌گرداند و رویداد چند بار اجرا شده است. انتخاب یک تگ عمومی مانند پاراگراف ممکن است نتیجه را در چند محل تکرار کند. همچنین چند کلیک روی دکمه می‌تواند چند بار همان محتوا را اضافه کند.

اگر تگ‌های HTML به شکل متن خام دیده می‌شوند، کوتیشن‌ها، نویسه‌های escape و نحوه ساخت رشته را بررسی کنید. برعکس، اگر داده بیرونی به HTML تبدیل می‌شود، آن را بدون پاک‌سازی وارد صفحه نکنید. بررسی کنسول مرورگر و کوچک‌کردن مثال به یک عنصر هدف نیز به پیدا کردن خطا کمک می‌کند.

متد before در jQuery راهی ساده برای افزودن متن یا HTML پیش از عنصر انتخاب‌شده است. با انتخابگر مناسب، محتوای دقیق و زمان اجرای درست، می‌توانید محل درج را کنترل کنید و از تکرار یا تغییر ناخواسته صفحه جلوگیری کنید.

پیش از استفاده، جایگاه موردنیاز را با متدهای after، prepend و append مقایسه کنید؛ سپس کد را با یک عنصر مشخص آزمایش کنید. رعایت ساختار HTML و بررسی داده‌های ورودی نیز باعث می‌شود نتیجه قابل پیش‌بینی‌تر و امن‌تر باشد.