متد wrapInner در jQuery
متد wrapInner برای قرار دادن محتوای داخلی یک عنصر درون ساختاری تازه به کار می‌رود. این روش کمک می‌کند محتوای موجود بدون جایگزین شدن، در یک لایه‌ی مشخص قرار بگیرد. در jQuery، انتخاب عنصرها و سپس استفاده از این متد، دو گام اصلی کار هستند.
برای درک این متد، بهتر است میان خود عنصر و محتوای قرارگرفته داخل آن تفاوت بگذاریم. عنصر بیرونی مانند ظرفی است که متن یا عنصرهای دیگری درون آن قرار می‌گیرند. wrapInner ساختار تازه را دور محتوای داخل ظرف می‌گذارد، نه دور خود ظرف. به همین دلیل، پس از اجرا همچنان می‌توان همان عنصر اصلی را در صفحه پیدا کرد. محتوای موجود نیز در ساختار تازه قرار می‌گیرد و برای این کار لازم نیست دوباره نوشته شود. این ویژگی زمانی کاربرد دارد که بخواهید بخش داخلی یک عنصر را گروه‌بندی کنید. برای نمونه، می‌توان متن داخل یک بخش را درون عنصری با ساختار مشخص قرار داد. انتخاب درست عنصر هدف، نتیجه را محدود به بخش موردنظر نگه می‌دارد. اگر چند عنصر انتخاب شوند، عملیات برای محتوای داخلی آن‌ها انجام می‌شود. بنابراین پیش از استفاده، بررسی انتخابگر و محدوده آن اهمیت دارد.
در این بخش از آموزش JQuery ، متد wrapInner را شرح میدهیم.
در آموزش jQuery، آشنایی با متدهای تغییر ساختار صفحه به فهم بهتر کدهای تعاملی کمک می‌کند. wrapInner یکی از روش‌هایی است که برای قراردادن پوشش پیرامون محتوای موجود به کار می‌رود. هنگام جست‌وجوی آموزش این متد، معمولاً شکل فراخوانی و تفاوت آن با روش‌های مشابه اهمیت دارد. در این توضیح، تمرکز بر محتوای داخل عنصر انتخاب‌شده باقی می‌ماند. لینک آموزش JQuery مسیر دسترسی به مطالب مرتبط را فراهم می‌کند. لینک متد wrapInner نیز به موضوع مشخص همین صفحه اشاره دارد. این دو پیوند از نظر موضوعی مکمل یکدیگر هستند. نخست می‌توان با مفاهیم کلی jQuery آشنا شد و سپس سراغ کاربرد این متد رفت. چنین ترتیبی به خواننده کمک می‌کند مثال‌ها را با زمینه مناسب دنبال کند.
در این آموزش، کاربرد متد wrapInner در کنار شکل کلی فراخوانی آن بررسی می‌شود. منظور از محتوای داخلی، محتوایی است که داخل عنصر انتخاب‌شده قرار دارد. بنابراین دانستن تفاوت عنصر بیرونی و محتوای درونی، هنگام استفاده از این متد اهمیت دارد.
محتوای داخلی می‌تواند شامل متن، عنصرهای HTML یا ترکیبی از هر دو باشد. متد با محتوای موجود کار می‌کند و آن را در ساختار پوشاننده قرار میدهد. این نکته کمک می‌کند بدانید تغییر موردنظر دقیقاً روی کدام بخش صفحه رخ میدهد. برای مثال، یک پاراگراف عنصر بیرونی است و نوشته داخل آن محتوای درونی محسوب می‌شود. اگر پاراگراف انتخاب شود، هدف wrapInner نوشته و محتوای داخلی آن خواهد بود. اشتباه گرفتن این دو سطح ممکن است باعث انتخاب متدی نامتناسب با نیاز شود. پیش از نوشتن کد، مشخص کنید قصد دارید خود عنصر را بپوشانید یا محتوای آن را. این پرسش ساده مسیر انتخاب روش مناسب را روشن‌تر می‌کند. در نتیجه، بررسی ساختار HTML صفحه پیش از اجرای کد مفید است.
شکل کلی استفاده از متد wrapInner به شرح زیر است :
نمایش شکل کلی فراخوانی، اجزای مختلف کد را از یکدیگر جدا می‌کند. در این الگو، ابتدا مجموعه‌ای از عنصرها انتخاب می‌شود و سپس متد روی آن‌ها فراخوانی می‌شود. آرگومان داخل پرانتز، اطلاعات لازم برای ساخت پوشش را در اختیار متد قرار میدهد. ممکن است این مقدار یک ساختار مشخص باشد یا از تابع استفاده کند. این تفاوت زمانی اهمیت دارد که پوشش برای عنصرهای انتخاب‌شده به شکل‌های متفاوت تعیین شود. در استفاده‌های ساده، یک ساختار ثابت می‌تواند نیاز مثال را برآورده کند. بهتر است هر بخش از الگو را جداگانه بخوانید تا نقش آن روشن بماند. توجه به نام متد نیز یادآوری می‌کند که پوشش روی محتوای داخلی قرار می‌گیرد. این شیوه خواندن، بررسی و ویرایش کد را آسان‌تر می‌کند.
در این ساختار، selector مشخص می‌کند متد روی کدام عنصرها اجرا شود. مقدار wrappingElement ساختاری است که برای پوشاندن محتوای داخلی در نظر گرفته می‌شود. بخش function(index) نیز شکل دیگری برای تعیین ساختار پوشاننده در فراخوانی متد است.
selector معمولاً یک انتخابگر jQuery است که عنصرهای موردنظر را پیدا می‌کند. برای نمونه، انتخابگر می‌تواند بر اساس نام تگ، شناسه یا کلاس نوشته شود. نتیجه انتخابگر مشخص می‌کند کدام محتوا در ادامه تغییر ساختار پیدا کند. wrappingElement به ساختاری اشاره دارد که نقش پوشش تازه را بر عهده می‌گیرد. این ساختار می‌تواند به شکل رشته‌ای شامل نشانه‌گذاری HTML ارائه شود. وقتی از تابع استفاده می‌شود، پارامتر index برای اشاره به موقعیت عنصر در مجموعه کاربرد دارد. تابع می‌تواند ساختار پوشاننده را برای هر موقعیت تعیین کند. انتخاب میان مقدار ثابت و تابع به نیاز کد بستگی دارد. اگر برای همه عنصرها یک پوشش کافی باشد، شکل ثابت خواناتر است. اگر ساختار باید وابسته به موقعیت باشد، شکل تابع قابل بررسی خواهد بود. در هر دو حالت، هدف قراردادن پوشش پیرامون محتوای داخل عنصر است.
$(selector).wrapInner(wrappingElement,function(index))
این الگو را می‌توان به چند بخش خوانا تقسیم کرد. عبارت پیش از نقطه، انتخابگر را به jQuery معرفی می‌کند. نام متد پس از نقطه نشان میدهد چه عملی روی مجموعه انتخاب‌شده انجام می‌شود. آرگومان‌ها میان پرانتز قرار می‌گیرند و ورودی متد را تشکیل می‌دهند. در این نمایش، نام‌های selector و wrappingElement نقش جای‌نگهدار دارند. هنگام نوشتن کد واقعی، آن‌ها با انتخابگر و ساختار موردنظر جایگزین می‌شوند. تابع نیز در صورت نیاز می‌تواند برای تعیین پوشش استفاده شود. این شکل کلی به‌تنهایی نمونه اجرایی کامل نیست، بلکه قالبی برای فهم ترتیب اجزاست. هنگام تمرین، بهتر است هر جای‌نگهدار را با مقدار واقعی و قابل‌فهم عوض کنید. سپس می‌توانید نتیجه را با ساختار HTML صفحه مقایسه کنید. این مقایسه روشن می‌کند کدام عنصر انتخاب شده و چه محتوایی پوشش گرفته است.
در نمونه‌ی بالا، عبارت selector پیش از نقطه، مجموعه‌ی هدف را مشخص می‌کند. سپس wrapInner روی محتوای داخلی هر عنصر انتخاب‌شده اعمال می‌شود. هنگام خواندن این الگو، پرانتزها و ترتیب آرگومان‌ها را با دقت بررسی کنید.
در زبان jQuery، بخش انتخابگر و فراخوانی متد پشت سر هم نوشته می‌شوند. نقطه میان آن‌ها نشان میدهد متد به مجموعه انتخاب‌شده متصل است. اگر انتخابگر چند عنصر را پیدا کند، عملیات برای محتوای داخلی عنصرهای همان مجموعه انجام می‌شود. به همین دلیل، نتیجه تنها به نام متد وابسته نیست. انتخابگر نیز در تعیین محدوده تغییر نقش مستقیم دارد. پرانتزهای پس از نام متد، محل قرارگیری ورودی‌ها هستند. ترتیب ورودی‌ها را مطابق شکل فراخوانی نگه دارید تا کد خوانا باشد. هنگام عیب‌یابی، ابتدا بررسی کنید انتخابگر عنصرهای موردانتظار را پیدا می‌کند. سپس ساختار ارسالی به متد را جداگانه بررسی کنید. این دو بررسی، درک علت نتیجه متفاوت را ساده‌تر می‌کنند.
مثال زیر کاربرد متد wrapInner را نشان میدهد:
مثال عملی کمک می‌کند ارتباط میان انتخابگر، رویداد و متد بهتر دیده شود. کد این بخش پس از رخداد کلیک، عملیات موردنظر را اجرا می‌کند. انتخابگر button عنصرهایی را هدف می‌گیرد که نقش دکمه دارند. درون تابع رویداد، انتخابگر p برای پیدا کردن پاراگراف‌ها استفاده شده است. سپس ساختار ارسالی به wrapInner محتوای داخلی آن پاراگراف‌ها را می‌پوشاند. اگر صفحه چند پاراگراف داشته باشد، انتخابگر می‌تواند همه موارد منطبق را هدف قرار دهد. برای دنبال‌کردن نمونه، ابتدا رویداد کلیک را پیدا کنید. بعد از آن، خط مربوط به انتخاب پاراگراف‌ها را بخوانید. در پایان، آرگومان متد را بررسی کنید تا نوع پوشش مشخص شود. این ترتیب خواندن، مسیر اجرای نمونه را مرحله‌به‌مرحله روشن می‌سازد.
$("button").click(function(){
$("p").wrapInner("<b></b>");
});
در این کد، فراخوانی click تابعی را برای رسیدگی به کلیک تعریف می‌کند. دستورهای داخل تابع پس از رخداد موردنظر اجرا می‌شوند. خط بعدی انتخابگر p را به jQuery میدهد تا پاراگراف‌ها مشخص شوند. رشته ارسال‌شده به wrapInner شامل تگ آغاز و پایان b است. این تگ‌ها ساختار پوشاننده‌ای را معرفی می‌کنند که دور محتوای داخلی قرار می‌گیرد. در نمایش کد، نشانه‌های تگ به‌صورت نویسه‌های گریزدار آمده‌اند. این شیوه نمایش باعث می‌شود کد HTML داخل رشته خوانا باقی بماند. برای دنبال‌کردن اجرای نمونه، روی دکمه کلیک کنید و تغییر ساختار پاراگراف را ببینید. هر بار بررسی را با وضعیت صفحه و عنصرهای انتخاب‌شده مرتبط کنید. به این ترتیب، نقش هر خط کد در نتیجه نهایی روشن‌تر می‌شود.
ابتدا رویداد کلیک برای عنصرهای button تعریف شده است. پس از کلیک، انتخابگر p پاراگراف‌ها را پیدا می‌کند و wrapInner ساختار b را دور محتوای داخلی آن‌ها قرار میدهد. در این نمونه، تگ‌های HTML به‌صورت رشته به متد داده شده‌اند و محتوای پاراگراف جایگزین نمی‌شود.
رویداد کلیک تعیین می‌کند چه زمانی دستورهای درون تابع اجرا شوند. بنابراین، تعریف این تابع به‌تنهایی به معنی اجرای فوری عملیات نیست. پس از رخداد کلیک، خط انتخابگر p پاراگراف‌های منطبق را مشخص می‌کند. سپس متد روی محتوای داخلی آن پاراگراف‌ها اثر می‌گذارد. ساختار b در این مثال نقش پوشش HTML را دارد. هدف مثال، نمایش چگونگی به‌کارگیری متد در پاسخ به تعامل کاربر است. تفاوت میان انتخاب دکمه و انتخاب پاراگراف را در کد دنبال کنید. دکمه آغازگر رویداد است، اما پاراگراف هدف عملیات پوشاندن است. همین تفکیک به خواندن کدهای تعاملی کمک می‌کند. محتوای پاراگراف در مثال حفظ می‌شود و درون ساختار تازه قرار می‌گیرد. در نتیجه، تمرکز اصلی این نمونه تغییر سازمان‌دهی محتوای داخلی است. هنگام ساخت نمونه مشابه، نام انتخابگرها را با ساختار صفحه خود هماهنگ کنید.