الفرق بين المراجعتين ل"jQuery/closest"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 25: سطر 25:
 
[[JavaScript/Element|عنصر]]، ويُمثِّل العنصر المطلوب مُطابقة العناصر معه.
 
[[JavaScript/Element|عنصر]]، ويُمثِّل العنصر المطلوب مُطابقة العناصر معه.
  
−
بإعطاء كائن jQuery مُمثِّل لمجموعة عناصر DOM، يبحث التّابع <code>‎.closest()‎</code> في هذه العناصر وعناصرها الأسلاف في شجرة DOM ويبني كائن jQuery جديد من العناصر المُطابِقة. تتشابه الدالتان ‎<code>[[JQuery/parents|.parents()]]</code>‎ و ‎<code>.closest()</code>‎ في أنّ كلاهما ينتقلان للبحث في المستوى الأعلى في شجرة DOM، ومع أنّ الفوارق بينهما طفيفة ولكنّها هامة:
+
بإعطاء كائن jQuery مُمثِّل لمجموعة عناصر DOM، يبحث التّابع <code>‎.closest()‎</code> في هذه العناصر وعناصرها الأسلاف في شجرة DOM ويبني كائن jQuery جديد من العناصر المُطابِقة. يتشابه التابعان ‎<code>[[JQuery/parents|.parents()]]</code>‎ و ‎<code>.closest()</code>‎ في أنّ كلاهما ينتقلان للبحث في المستوى الأعلى في شجرة DOM، ومع أنّ الفوارق بينهما طفيفة ولكنّها هامة:
 
{| class="wikitable"
 
{| class="wikitable"
 
!<code>‎.closest()‎</code>
 
!<code>‎.closest()‎</code>
 
!<code>[[JQuery/parents|‎.parents()‎]]</code>
 
!<code>[[JQuery/parents|‎.parents()‎]]</code>
 
|-
 
|-
−
|تبدأ بالعنصر الحالي.
+
|يبدأ بالعنصر الحالي.
−
|تبدأ بالعنصر الأب.
+
|يبدأ بالعنصر الأب.
 
|-
 
|-
−
|تنتقل إلى المستويات الأعلى في شجرة DOM حتى تجد مُطابقًا للمُحدِّد المطلوب.
+
|ينتقل إلى المستويات الأعلى في شجرة DOM حتى يجد مُطابقًا للمُحدِّد المُعطى.
−
|تنتقل
+
|ينتقل إلى المستويات الأعلى في شجرة DOM حتى الوصول إلى العنصر الجذري (root element) ويُضيف كل عنصر من العناصر الأسلاف إلى مجموعة مؤقتة، ثمّ يُرشِّح المجموعة اعتمادًا على المُحدِّد المُعطى (إن زوّدناه بُمحدِّد).
 
|-
 
|-
−
|
+
|يحتوي كائن jQuery المُعاد على كائن واحد أو ولا كائن لكل عنصر من المجموعة الأصليّة، وبنفس ترتيب المستند.
−
|
+
|يحتوي كائن jQuery المُعاد على أكثر من كائن أو ولا كائن لكل عنصر من المجموعة الأصليّة، وبترتيب مُعاكِس لترتيب المستند.
 
|}
 
|}
 +
<syntaxhighlight lang="html">
 +
<ul id="one" class="level-1">
 +
  <li class="item-i">I</li>
 +
  <li id="ii" class="item-ii">II
 +
    <ul class="level-2">
 +
      <li class="item-a">A</li>
 +
      <li class="item-b">B
 +
        <ul class="level-3">
 +
          <li class="item-1">1</li>
 +
          <li class="item-2">2</li>
 +
          <li class="item-3">3</li>
 +
        </ul>
 +
      </li>
 +
      <li class="item-c">C</li>
 +
    </ul>
 +
  </li>
 +
  <li class="item-iii">III</li>
 +
</ul>
 +
</syntaxhighlight>فلنفترض أنّنا بحثنا عن عناصر <code>[[HTML/ul|<ul‎>]]</code> بدءًا من العنصر A:<syntaxhighlight lang="javascript">
 +
$( "li.item-a" )
 +
  .closest( "ul" )
 +
  .css( "background-color", "red" );
 +
</syntaxhighlight>سيُغيّر هذا لون القائمة <code>[[HTML/ul|<ul‎>]]</code> ذات الصنف <code>level-2</code> ، بما أنّه أول عنصر <code>[[HTML/ul|<ul‎>]]</code> نُصادفه عند الانتقال للأعلى في شجرة DOM.
 +
 +
فلنفترض أنّنا نريد البحث عن العنصر <code>[[HTML/li|<li‎>]]</code> بدلًا من ذلك:

مراجعة 13:22، 29 مايو 2018


‎.closest( selector )‎

القيمة المعادة

كائن jQuery.

الوصف

يُستخدَم التابع ‎.closest()‎ بالنسبة لكل عنصر في المجموعة للحصول على العنصر الأول الذي يُطابِق المُحدِّد عن طريق اختبار العنصر ذاته والانتقال إلى العناصر الأسلاف له في شجرة DOM.

‎.closest( selector )‎

أضيفت في الإصدار 1.3.

selector

مُحدِّد، ويُمثِّل سلسلة نصيّة تحتوي على تعبير المُحدِّد المطلوب مُطابقة العناصر معه.

‎.closest( selector [, context ] )‎

أضيفت في الإصدار: 1.4.

selector

مُحدِّد، ويُمثِّل سلسلة نصيّة تحتوي على تعبير المُحدِّد المطلوب مُطابقة العناصر معه.

context

عنصر، ويُمثِّل عنصر DOM الذي قد يُوجَد ضمنه عنصر مُطابِق.

‎.closest( selection )‎

أضيفت في الإصدار: 1.6.

selection

كائن jQuery، ويُمثِّل كائن jQuery المطلوب مُطابقة العناصر معه.

‎.closest( element )‎

أضيفت في الإصدار: 1.6.

element

عنصر، ويُمثِّل العنصر المطلوب مُطابقة العناصر معه.

بإعطاء كائن jQuery مُمثِّل لمجموعة عناصر DOM، يبحث التّابع ‎.closest()‎ في هذه العناصر وعناصرها الأسلاف في شجرة DOM ويبني كائن jQuery جديد من العناصر المُطابِقة. يتشابه التابعان ‎.parents()‎ و ‎.closest()‎ في أنّ كلاهما ينتقلان للبحث في المستوى الأعلى في شجرة DOM، ومع أنّ الفوارق بينهما طفيفة ولكنّها هامة:

‎.closest()‎ ‎.parents()‎
يبدأ بالعنصر الحالي. يبدأ بالعنصر الأب.
ينتقل إلى المستويات الأعلى في شجرة DOM حتى يجد مُطابقًا للمُحدِّد المُعطى. ينتقل إلى المستويات الأعلى في شجرة DOM حتى الوصول إلى العنصر الجذري (root element) ويُضيف كل عنصر من العناصر الأسلاف إلى مجموعة مؤقتة، ثمّ يُرشِّح المجموعة اعتمادًا على المُحدِّد المُعطى (إن زوّدناه بُمحدِّد).
يحتوي كائن jQuery المُعاد على كائن واحد أو ولا كائن لكل عنصر من المجموعة الأصليّة، وبنفس ترتيب المستند. يحتوي كائن jQuery المُعاد على أكثر من كائن أو ولا كائن لكل عنصر من المجموعة الأصليّة، وبترتيب مُعاكِس لترتيب المستند. 
<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

فلنفترض أنّنا بحثنا عن عناصر <ul‎> بدءًا من العنصر A:

$( "li.item-a" )
  .closest( "ul" )
  .css( "background-color", "red" );

سيُغيّر هذا لون القائمة <ul‎> ذات الصنف level-2 ، بما أنّه أول عنصر <ul‎> نُصادفه عند الانتقال للأعلى في شجرة DOM.

فلنفترض أنّنا نريد البحث عن العنصر <li‎> بدلًا من ذلك:

مجلوبة من "https://wiki.hsoub.com/index.php?title=jQuery/closest&oldid=9397"