logo
logo
تبلیغ کلیکی تاپ سایت 98

متدهای Siblings و prev و next در جی کوئری

متدهای Siblings و prev و next در جی کوئری
هدایت عباسی آموزش جی کوئری

آموزش ویدئویی متدهای Siblings و prev و next در جی کوئری

دانلود فیلم و آموزش ویدئویی متدهای Siblings و prev و next در جی کوئری . در این فیلم با این دستورات آشنا می شوید و نحوه کار با آنها را فرا می گیرید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش جی کوئری از تاپ سایت 98 قصد داریم به آموزش متدهای Siblings و prev و next و nextAll و nextUntil و prevAll و prevUntil در جی کوئری بپردازیم. با ذکر چندین مثال متدها و دستورات را یاد خواهید گرفت.

توجه : کدها همه تست شده می باشد و کاملا صحیح است. چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

خطا

چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

در صورتی که کد بالا اجرا نمی شود می توانید بجای cdn از فایل جی کوئری استفاده نمایید.

بایستی فایل جی کوئری را دانلود کرده باشید.

آموزش دانلود جی کوئری

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

متد siblings در جی کوئری ، برادر و خواهر عنصر را مشخص می کند. در مثال زیر ما li با کلاس aa را مشخص کردیم برادر وی li دیگر است که مقدار reza را در خود دارد. پس آن را انتخاب می کند و استایل یا css آن را تغییر می دهد.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.aa").siblings().css({"color": "red", "border": "3px solid red"});
});
</script>
</head>
<body>

<div>
<h1>topsite98.com</h1>
<ul>
<li><b>ali</b></li>
<li style="border: 1px solid blue"><span>reza</span></li>
</ul>
<p>pppp 111</p>
<p>ppp 2222</p>
</div>
</body>
</html>

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

متد next در جی کوئری برای انتخاب عنصر بعدی بکار می رود. در مثال بالا جای دستور را تغییر دهید و کد را اجرا نمایید.

نتیجه انتخاب ul خواهد بود و css روی آن اعمال می شود و کادری دورر آن می افتد.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h1").next().css({"color": "red", "border": "3px solid red"});
});
</script>
</head>
<body>

<div>
<h1>topsite98.com</h1>
<ul>
<li><b>ali</b></li>
<li style="border: 1px solid blue"><span>reza</span></li>
</ul>
<p>pppp 111</p>
<p>ppp 2222</p>
</div>
</body>
</html>

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

متد nextAll در جی کوئری ، همه عناصر بعد از عنصر انتخاب شده را مشخص و انتخاب می کند.

در مثال بالا کد را قرار دهید و کد را اجرا نمایید. خروجی همه عناصر بعد از ul خواهد بود یعنی دو تگ p انتخاب و استایل آنها تغییر می کند.

مثال

$("ul").nextAll().css({"color": "red", "border": "3px solid red"});

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

متد nextUntil در جی کوئری ، همه عناصر بین دو عنصر انتخاب شده را مشخص و انتخاب می کند.

در مثال بالا کد را قرار دهید و کد را اجرا نمایید. خروجی همه عناصر بین h1 و p خواهد بود یعنی تگ ul انتخاب و استایل آن تغییر می کند.

مثال

$("h1").nextUntil("p").css({"color": "red", "border": "3px solid red"});

متدهای prev() و prevAll() و prevUntil() در جی کوئری

متد prev برای انتخاب عنصر قبلی بکار می رود.

متد prevAll برای انتخاب عناصر قبلی بکار می رود.

متد prevUntil برای انتخاب عنصر بین دو عنصر مشخص شده بکار می رود.

مثال

$("p").prevAll().css({"color": "red", "border": "3px solid red"});

برای دیدن همه آموزش های جی کوئری کلیک کنید : آموزش کامل جی کوئری به زبان فارسی

 امیدواریم این آموزش برای شما مفید باشد. کدهای بالا تست شده می باشند.

موفق باشید.

 

این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.