diff options
Diffstat (limited to 'files/ar/web/api/element/closest/index.html')
| -rw-r--r-- | files/ar/web/api/element/closest/index.html | 148 |
1 files changed, 0 insertions, 148 deletions
diff --git a/files/ar/web/api/element/closest/index.html b/files/ar/web/api/element/closest/index.html deleted file mode 100644 index 5ad476bb9d..0000000000 --- a/files/ar/web/api/element/closest/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -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"><article> - <div id="div-01">Here is div-01 - <div id="div-02">Here is div-02 - <div id="div-03">Here is div-03</div> - </div> - </div> -</article></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 > 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 && 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 && !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 >= 0 && matches.item(i) !== el) {}; - } while ((i < 0) && (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> |