021-28423015
021-28423015

فیلتر کردن در jQuery

متدهای first()، last()، eq()، filter() و not()


متدهای اصلی فیلتر first()،last() و eq() می باشد که هرکدام به شما اجازه انتخاب عنصر مشخصی را براساس موقعیتشان در گروهی از عناصر می دهد.
ازدیگر متدهای فیلتر، مانند filer() و not() که به شمااجازه می دهد تا عناصری را که با معیارهای مشخص شما همخوانی داشته  یا نداشته باشد، انتخاب کنید.


متد first()


این متد اولین عنصر از عناصر مشخص شده را بر می گرداند.


مثال زیر اولین عنصر<div>را انتخاب می کند:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").first().css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>This is a paragraph.</p>

<div style="border: 1px solid black;">
  <p>A paragraph in a div.</p>
  <p>Another paragraph in a div.</p>
</div>
<br>

<div style="border: 1px solid black;">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>
<br>

<div style="border: 1px solid black;">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>

</body>
</html>


متد eq()


متد eq() عنصری را با شماره index مشخص از عناصر انتخاب شده، بر می گرداند .
شماره index از 0 شروع می شود،بنابراین اولین عنصر با شماره index صفر خواهد بود نه 1.مثال زیر دومین عنصر<p> را انتخاب خواهد کرد(با ایندکس 1):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").eq(1).css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>My name is Donald (index 0).</p>
<p>Donald Duck (index 1).</p>
<p>I live in Duckburg (index 2).</p>
<p>My best friend is Mickey (index 3).</p>

</body>
</html>


متد filter()


این متد به شما اجازه می دهد یک معیار را مشخص کنید. عناصری که با معیار شما همخوانی نداشته باشند از نتایج انتخاب حذف خواهند شد آنهایی که همخوانی دارند، برگشت داده خواهندشد.


مثال زیر تمام عناصر <p> با کلاس intro را بر می گرداند:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").filter(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>My name is Donald.</p>
<p class="intro">I live in Duckburg.</p>
<p class="intro">I love Duckburg.</p>
<p>My best friend is Mickey.</p>

</body>
</html>


متد not()

این متد تمام عناصری که با معیار انتخاب شما همخوانی ندارند را بر می گرداند.
نکته: این متد مخالف متد filter() است.


مثال زیر تمام عنصر <p> که کلاس intro  ندارند را برمی گرداند:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").not(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>My name is Donald.</p>
<p class="intro">I live in Duckburg.</p>
<p class="intro">I love Duckburg.</p>
<p>My best friend is Mickey.</p>

</body>
</html>
 

 

 


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط