طريقة jQuery لاستكشاف الأبوة ببساطة

يمكن الوصول بسهولة إلى جميع العناصر في وثيقة HTML باستخدام شجرة DOM

على سبيل المثال، هناك طرق للاطلاع على الأباء من الأعلى كالتالي

1.parent()يمكن لهذه الطريقة الحصول على الأب المباشر للعنصر المحدد

الحصول على الأب المباشر للعنصر <span> باستخدام $("span").parent();

2.parents()يستطيع هذا الطريقة الحصول على جميع الأباء للعنصر المحدد

الحصول على جميع الأباء للعنصر <span> باستخدام $("span").parents();

$("span").parents(".text"); تحصل على العنصر <class="text"> في العنصر الأب ل <span>

3.parentsUntil()يستخدم هذا الأسلوب للحصول على العناصر بين العنصرين المحددين

$("span").parentsUntil(".text"); تحصل على جميع العناصر بين <span> و <class="text">

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
 <style>
 .container
 {
  float:left;
  margin-left:30px;
 }
.container div
 {
  border:1px solid grey;
  margin:15px auto;
 }
.ancestor1-1,.ancestor2-1,.ancestor3-1,.ancestor4-1
{
  width:150px;
  height:150px;
} 
.ancestor1-2,.ancestor2-2,.ancestor3-2,.ancestor4-2
{
  width:120px;
  height:120px;
}
.ancestor1-3,.ancestor2-3,.ancestor3-3,.ancestor4-3
{
  width:90px;
  height:90px;
}
.now1,.now2,.now3,.now4
{
  width:60px;
  height:60px;
}
 </style>
 <script>
$($document).ready(function(){
$(".now1").parent().css("border-color","red");
$(".now2").parents().css("border-color","red");
$(".now3").parents(".ancestor3-2").css("border-color","red");
$(".now4").parentsUntil(".ancestor4-1").css("border-color","red");
}
);
 </script>
</head>
<body>
<div>
  <div class="container">
    <div class="ancestor1-1"><div class="ancestor1-2"><div class="ancestor1-3"><div class="now1">العنصر المحدد</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor2-1"><div class="ancestor2-2"><div class="ancestor2-3"><div class="now2">العنصر المحدد</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor3-1"><div class="ancestor3-2"><div class="ancestor3-3"><div class="now3">العنصر المحدد</div></div></div></div>
  </div>
  <div class="container">
    <div class="ancestor4-1"><div class="ancestor4-2"><div class="ancestor4-3"><div class="now4">العنصر المحدد</div></div></div></div>
  </div>
</div>
</body>
</html>

صورة النتائج:

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

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

أنت قد تحب