files/ar/web/api/element/closest/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

---
title: Element.closest()
slug: Web/API/Element/closest
tags:
  - دوم
  - مرجع
  - واجهة برمجة تطبيقات
translation_of: Web/API/Element/closest
---
<div>{{APIRef('DOM')}}</div>

<div dir="rtl">ال <code><strong>closest()</strong></code> method تجتاز {{domxref ("Element")}} والأصل(يتجهون نحو جذر المستند) حتى يعثروا على عقدة تتطابق مع الstring المحدد. سيعود نفسه أو أسلاف مطابقة. إذا لم يكن هناك مثل هذا العنصر ، فإنه يعيد <code>null</code>.</div>

<h2 id="تركيب_الجملة">تركيب الجملة</h2>

<pre class="syntaxbox notranslate">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>);
</pre>

<h3 id="المعاملات">المعاملات</h3>

<ul>
 <li><code><var>selectors</var></code> is a {{domxref("DOMString")}} containing a selector list.<br>
  ex: <code>p:hover, .toto + q</code></li>
</ul>

<h3 id="القيمة_المرجعة">القيمة المرجعة</h3>

<ul>
 <li><code><var>closestElement</var></code> is the {{domxref("Element")}} which is the closest ancestor of the selected element. It may be <code>null</code>.</li>
</ul>

<h3 id="استثناءات">استثناءات</h3>

<ul>
 <li>{{exception("SyntaxError")}} is thrown if the <code><var>selectors</var></code> is not a valid selector list string.</li>
</ul>

<h2 id="مثال">مثال</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;article&gt;
  &lt;div id="div-01"&gt;Here is div-01
    &lt;div id="div-02"&gt;Here is div-02
      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js notranslate">var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");
// returns the element with the id=div-02

var r2 = el.closest("div div");
// returns the closest ancestor which is a div in div, here it is the div-03 itself

var r3 = el.closest("article &gt; div");
// returns the closest ancestor which is a div and has a parent article, here it is the div-01

var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here it is the outmost article</pre>

<h2 id="Polyfill">Polyfill</h2>

<p dir="rtl">بالنسبة للمتصفحات التي لا تدعم ()Element.closest ، ولكنها تدعم ال()element.matches (أو ما يعادله سابقًا ، بمعنى IE9 +) ، توجد تعبئة متعددة:</p>

<pre class="brush: js notranslate">if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector ||
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null &amp;&amp; el.nodeType === 1);
    return null;
  };
}</pre>

<p dir="rtl">ومع ذلك ، إذا كنت تحتاج بالفعل إلى دعم IE 8 ، فإن polyfill التالي سيقوم بالمهمة ببطء شديد ، ولكن في النهاية. ومع ذلك ، ستدعم فقط محددات CSS 2.1 في IE 8 ، ويمكن أن تسبب تأخر كبير في إنتاج المواقع .</p>

<pre class="brush: js notranslate">if (window.Element &amp;&amp; !Element.prototype.closest) {
  Element.prototype.closest =
  function(s) {
    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i,
        el = this;
    do {
      i = matches.length;
      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
    return el;
  };
}
</pre>

<h2 id="مواصفات">مواصفات</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">مواصفات</th>
   <th scope="col">الحالة</th>
   <th scope="col">تعليق</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>تعريف ابتدائي.</td>
  </tr>
 </tbody>
</table>

<h2 id="التوافق_مع_المتصفحات">التوافق مع المتصفحات</h2>

<div>
<div class="hidden" dir="rtl">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.</div>

<p>{{Compat("api.Element.closest")}}</p>

<h3 id="ملاحظات_التوافق">ملاحظات التوافق</h3>

<ul dir="rtl">
 <li>في Edge 15-18 <code>document.createElement(tagName).closest(tagName)</code> ستعيد <code>null</code> ذا كان العنصر غير متصل أولاً (بشكل مباشر أو غير مباشر) بObject السياق ، على سبيل المثال {{domxref ("Document")}}<br>
  Object في حالة DOM العادي.</li>
</ul>
</div>

<h2 id="إقرأ_أيضا">إقرأ أيضا</h2>

<ul>
 <li>The {{domxref("Element")}} interface.</li>
 <li>
  <div class="syntaxbox"><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">The syntax of Selectors</a></div>
 </li>
 <li>
  <div class="syntaxbox">Other methods that take selectors: {{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}.</div>
 </li>
</ul>