افزودن عناصر جدید به عناصر انتخاب شده‌

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

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

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

اما بگذارید یک وضعیت که ممکن است برای شما هم پیش بیاید را در اینجا مطرح کنیم، به عنوان مثال، می‌خواهیم کلیه عناصر، <img >را که دارای مشخصهalt  و یاtitle  هستند را تحت تاثیر یک رویداد قرار دهیم و یا کنترل آنها را برای انجام عملیاتی دیگر در دست بگیریم. در اینجاست که تابع پوششی و انتخابگر جی کوئری باعث می‌شود که تنها با کمک دستور ،$('img]alt[img]title[')  به هدفمان برسیم اما اگر بتوانیم همین روش را با استفاده از تابع add()  پیاده سازی کنیم، دستوری شبیه به $('img]alt[').add('img]title[')  خواهیم داشت.

استفاده از دستور()add در روش دوم باعث می‌شود که به گروهی از عناصر انتخاب شده بر اساس رابطه  یا دسترسی پیدا کنیم، به این ترتیب که عناصر ، <img >که فقط داری ویژگیtitle هستند و یا عناصری که دارای ویژگی alt  هستند و یا عناصری که دارای هر دو ویژگی هستند.

همانطور که در مثال هم مشاهده نمودید مقدار ورودی تابع add()  می‌تواند عناصری موجود در صفحه و یا عناصرDOM  و یا ارائه‌ای از مجموع چندین عنصر باشد.

مقدار خروجی این تابع هم مجموعه‌ای از عناصر است که با یکدیگر ادغام شده‌اند. اکنون به آزمایشگاه تابع پوششی جی کوئری که در بخش‌های قبل معرفی شد بروید و مثالی که زده شد را در آن آزمایش و نتیجه را مشاهده کنید.

اما تابعadd()  قابلیت‌های دیگری نیز دارد، بگذارید تا نگاه دقیق تری به این قابلیت‌ها داشته باشیم، فرض کنید می‌خواهیم یک حاشیه چند پیکسلی به عناصر ، <img >که دارای ویژگی  alt  هستند اختصاص دهیم و سپس به همه عناصر <img >که دارای دو ویژگی Alt  وTitle  هستند نیز یک کلاس جدید نسبت دهیم، این کار از طریق انتخابگر‌های  CSS  به هیچ عنوان قابل انجام نیست، اما با استفاده از تابعadd()  در جی کوئری به سادگی می‌توان از طریق دستور زیر به هدف رسید:

('img]alt[').addClass('thickBorder')$
add('img]title[').addClass('seeThrough')

در این دستور با استفاده از انتخابگر جی کوئری، کنترل گروهی از عناصر ، <img >که دارای ویژگی  alt  هستند را تحت اختیار خود قرار می‌دهیم، سپس کلاسی را به آنها اضافه می‌کنیم که باعث می‌شود حاشیه‌هایی با اندازه و رنگ‌هایی که در  CSS تعریف شده اند به تصاویر افزوده شوند بعد از انجام این عمل ما، دیگر تصاویری که دارای ویژگی title  هستند را نیز به جمع عناصر انتخاب شده می‌افزاییم، و سپس به تمامی آنها کلاس خاصی که مورد نظرمان است را نسبت می‌دهیم.

این دستور را در آزمایشگاه تابع پوششی وارد کنید و نتیجه را مشاهده نمایید، نتیجه بسیار جالب خواهد بود!
از تابعadd()  همچنین می‌توان جهت تغییر در دیگر عناصر DOM  در صفحه استفاده کرد، به عنوان مثال بعد از بارگذاری صفحه می‌خواهیم تغییراتی در برخی عناصر ایجاد کنیم، مثال زیر را در نظر بگیرید:

،'(<div،/>('p').add('>div< Hi there!$
این دستور ابتدا کلیه تگ‌های ، >p را تحت کنترل خود قرار می‌دهد  سپس یک عنصر ،>div ایجاد کرده و با قرار دادن متن مورد نظر درآن،  این عنصر را برای نمایش در صفحه توسط دستوراتی که در بخش‌های بعد معرفی خواهند شد آماده می‌کند.

پویا سلیمی‌