0
آموزش jquery قسمت چهارم کار با Traversing
آموزش jquery قسمت چهارم کار با Traversing
در قسمت چهارم از آموزش jquery به مفهوم Traversing در jquery می پردازیم.
در قسمت های قبلی در مورد Selector ها و Filter ها صبحت کردیم در صورتی که با این مفاهیم در jquery آشنا نیستید به آموزش های همین دوره مراجعه کنید.
برای این که بتوانید تعداد تگ های را شمارش کنید باید از length و size استفاده کنید.
در مثال زیر با استفاده از متد alert تعداد تگ های p را نمایش دادیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("There are" + $("p").length + " <p> tags!");
alert("There are" + $("p").size() + " <p> tags!");
});
</script>
</head>
<body>
<p>iranganj 1</p>
<p>iranganj 2</p>
<p>iranganj 3</p>
<p>iranganj 3</p>
</body>
</html>
در مثال زیر ابتدا اطلاعات تگ های li را دریافت کردیم و در یک متغیر قرار دادیم و سپس تعداد آن را با استفاده از length توسط متد alert نمایش دادیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var oElement = $("li").get();
alert("There are" + oElement.length + " <li> tags!");
});
</script>
</head>
<body>
<ul>
<li>iranganj 1</li>
<li>iranganj 3</li>
<li>iranganj 4</li>
</ul>
</body>
</html>
با استفاده از متد find می توانید یک مورد خاص را جستجو کرد. این دستور نیز همانند انتخاب کننده ها (selectors) می باشد.
در مثال زیر یک css به عناصر انتخابی اعمال کردیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ul").find("li.b").css("border", "thin solid red");
});
</script>
</head>
<body>
<ul>
<li>iranganj 1</li>
<li class="b">iranganj 3</li>
<li>iranganj 4</li>
</ul>
</body>
</html>
دستور each برای هر عنصر یک بار اجرا می شود. مثلا در کد زیر 4 تگ p داریم این تابع 4 بار اجرا شده و برای هر تگ p کدهای css که نوشتیم اعمال می کند.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>iranganj</title>
<script src="jquery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var border = 3;
var leftMargin = 0;
$("p").each(function () {
$(this).css("border", border + "px solid Red");
$(this).css("margin-left", leftMargin + "px");
border += 2;
leftMargin += 10;
});
});
</script>
</head>
<body>
<p>iranganj 1</p>
<p>iranganj 2</p>
<p>iranganj 3</p>
<p>iranganj 4</p>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال