متدهای 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>