دوستان عزیز سلام. حالتون که خوبه ؟ در این بخش آموزش توابع before و after در jQuery میپردازیم. امیدوارم که این مطالب برای شما مفیدواقع گردد.همانطور که میدانید در مبحث پیشین با نحوه ی افزودن آیتم های جدید در داخل المان، با استفاده از دو متد append() و prepend() آشنا شدیم. اما در برخی موارد لازم است یک یا چند آیتم جدید را به بعد یا قبل المان های جاری پیوست کنیم. کتابخانه ی jQuery دو متد before() و after() را برای این منظور در نظر گرفته است. کاربرد دو متد مزبور را در مثال زیر مشاهده می کنید:

نمونه یک
?
۱
۲
۳
۴
۵
۶
۷

<a href="javascript:void(0);" onclick="$('input.test1').before('Before‘);”>Before
<a href="javascript:void(0);" onclick="$('input.test1').after('After‘);”>After

بسته به اینکه بر روی کدام لینک کلیک کنید، یک تگ italic یا bold، با استفاده از کلاس”test1″ ، به قبل یا بعد المان input اضافه می شود. درست مانند توابع append() و prepend()، دو متد before() و after() نیز به شما اجازه می دهند از رشته های HTML، المان های DOM و اشیا jQuery به عنوان پارامتر ارسالی استفاده کنید (همچنین تعداد آرگومان ورودی این دو تابع می تواند نامحدود باشد). نمونه:

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴

Insert elements

Hello world?

function InsertElements() {
var element1 = $(““).text(“Hello “);
var element2 = “there “;
var element3 = document.createElement(“u”);
element3.innerHTML = “jQuery!”;

$(“#spnTest2”).after(element1, element2, element3);
}

در مثال فوق یک شی jQuery، رشته ی HTML، یک المان JavaScript DOMایجاد کرده و سپس با استفاده از متد after() تمامی آن ها به بعد المان span اضافه می کنیم.

توابع before() و after() دارای مشتقاتی هستند که عبارتند از: insertBefore() و insertAfter(). نتیجه ای که از فراخوانی دو متد متشتق حاصل می شود با توابع اصلی آن ها یکسان است. تنها تفاوت در ترتیب انجام کار می باشد. مثال:

نمونه سه
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

Insert elemenets

Hello world?

function InsertElementsBefore() {
$(“#spnTest3”).before($(““).text(“before() “));
$(““).text(“insertBefore() “).insertBefore(“#spnTest3”);
}