ورود به کارتابل مشتریان وب مهراز
فیلتر کردن در jQuery
یادگیری 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>
نظر شما
>