طريقة استدعاء الأب والأجداد في JQuery

تتبع JQuery

أولاً، يجب أن نعرف ما هو الأب، الابن، الحفيد، الشقيق، والأجداد

• العنصر <div> هو الأب للعنصر <ul>، وهو أيضًا الأجداد لجميع المحتويات.

• العنصر <ul> هو الأب للعنصر <li>، وهو أيضًا ابن <div>.

• العنصر <li> من اليسار هو الأب للـ <span>، ابن <ul>، وهو أيضًا حفيد <div>.

• العنصر <span> هو ابن العنصر <li>، وهو أيضًا حفيد <ul> و <div>.

• العنصرين <li> هما شقيقان (لديهم نفس الأب).

• العنصر <li> من اليمين هو الأب للـ <b>، ابن <ul>، وهو أيضًا حفيد <div>.

• العنصر هو ابن العنصر <li> من اليمين، وهو أيضًا حفيد <ul> و <div>.

تتبع الأب والأجداد

1.parent()

تتبع الأب المباشر فقط ولا تتبع السلفين الآخرين

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>بدون عنوان مستند</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#info").html("أب div4"+$("#div4").parent().attr("id"));
  });
});
</script>
</head>
<body>
<input type="button" value="نقر" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
  <div id="div3">
    <div id="div4">
  		</div>
  </div>
 </div>
</div>
</body>
</html>

2.parents()

تتبع جميع السلفين

.each(function(i,e){})

تتبع كل عنصر من بينها

فيها i هو المؤشر، e هو العنصر الحالي، وهو مثل $(this)، ولكن الأول هو عنصر جافا سكريبت، والثاني هو عنصر جاكوبي.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>بدون عنوان مستند</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#div4").parents().each(function(i, e) {
        $("#info").html($("#info").html()+"الكنز"+i+"السابق هو,("+$(this).attr("id")+")");
      });
  });
});
</script>
</head>
<body>
<input type="button" value="نقر" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
  <div id="div3">
    <div id="div4">
  		</div>
  </div>
 </div>
</div>
</body>
</html>

قد تتساءل الآن ما هو السلف الثالث والرابع؟ دعونا نتحقق في الويب باستخدام F12 لنرى النتيجة

عندما يكون i=3 أي أنه وصل إلى الثالث سلف، النتيجة هي body

عندما يكون i=4 أي أنه وصل إلى الرابع سلف، النتيجة هي html

3.parentsUntil()

تتبع إلى السلف المحدد (لا يشمل السلف نفسه)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>بدون عنوان مستند</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
			$("#div4").parentsUntil("#div1").each(function(i, e) {
        $("#info").html($("#info").html()+"الكنز"+i+"السابق هو,("+$(this).attr("id")+")");
      });
  });
});
</script>
</head>
<body>
<input type="button" value="نقر" id="btn"><div id="info"></div>
<div id="div1">
 <div id="div2">
  <div id="div3">
    <div id="div4">
  		</div>
  </div>
 </div>
</div>
</body>
</html>

لذا، النطاق بين #div4 و #div1 دون #div1

هذا المقال عن كيفية التمرير عبر الأبناء والأسلاف العناصر في JQuery هو كل ما سأشارككم، آمل أن يكون هذا مرجعًا لكم، وأتمنى أن تحصلوا على الدعم الكبير لتعليمات النقاهة.

تعليمية الأساس

أنت قد تعجب بهذه