الفرق بين المراجعتين لصفحة: «jQuery/not»
جميل-بيلوني (نقاش | مساهمات) إضافة محتويات الصفحة. |
لا ملخص تعديل |
||
| سطر 18: | سطر 18: | ||
==== <code>function</code> ==== | ==== <code>function</code> ==== | ||
دالة من الشكل <code>[[JavaScript/Function|Function]]( | دالة من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Number|Number]] index, [[JavaScript/Element|Element]] element )</code> تعيد قيمة [[JavaScript/Boolean|منطقيَّة Boolean]]، وتُستعمَل للتحقُّق من كلِّ عنصر من عناصر المجموعة. تقبل هذه الدالة وسيطين؛ الأول index وهو فهرس العنصر في مجموعة jQuery، والثاني element وهو عنصر DOM. يشير <code>[[JavaScript/this|this]]</code> ضمن الدالة إلى عنصر DOM الحالي. | ||
=== <code>.not( selection )</code> === | === <code>.not( selection )</code> === | ||
| سطر 41: | سطر 41: | ||
=== حذف عناصر محدَّدة === | === حذف عناصر محدَّدة === | ||
الإصدار الثاني من التابع <code>.not()</code> يسمح لنا بحذف العناصر من المجموعة المطابقة بفرض أنَّه وجدنا هذه العناصر مسبقًا باستعمال وسائل أخرى. إن كانت مثلًا القائمة في المثال السابق تحتوي على عنصر يملك مُعرِّف ( | الإصدار الثاني من التابع <code>.not()</code> يسمح لنا بحذف العناصر من المجموعة المطابقة بفرض أنَّه وجدنا هذه العناصر مسبقًا باستعمال وسائل أخرى. إن كانت مثلًا القائمة في المثال السابق تحتوي على عنصر يملك مُعرِّف (id) مثل:<syntaxhighlight lang="html"> | ||
<ul> | <ul> | ||
<li>العنصر الأول</li> | <li>العنصر الأول</li> | ||
| سطر 49: | سطر 49: | ||
<li>العنصر الخامس</li> | <li>العنصر الخامس</li> | ||
</ul> | </ul> | ||
</syntaxhighlight>يمكننا العثور على هذا العنصر (العنصر الثالث في القائمة) باستعمال الدالة <code>getElementById()</code> الأساسية في [[JavaScript]] ثم إزالتها من كائن jQuery:<syntaxhighlight lang="javascript"> | </syntaxhighlight>يمكننا العثور على هذا العنصر (العنصر الثالث في القائمة) باستعمال الدالة [[JavaScript/Document/getElementById|<code>getElementById()</code>]] الأساسية في [[JavaScript]] ثم إزالتها من كائن jQuery:<syntaxhighlight lang="javascript"> | ||
$( "li" ).not( document.getElementById( "notli" ) ) | $( "li" ).not( document.getElementById( "notli" ) ) | ||
.css( "background-color", "red" ); | .css( "background-color", "red" ); | ||
| سطر 104: | سطر 104: | ||
</html> | </html> | ||
</syntaxhighlight>حذف العنصر ذو المُعرِّف "selected" من جميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="javascript"> | </syntaxhighlight>حذف العنصر ذو المُعرِّف <code>"selected"</code> من جميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="javascript"> | ||
$( "p" ).not( $( "#selected" )[ 0 ] ); | $( "p" ).not( $( "#selected" )[ 0 ] ); | ||
</syntaxhighlight>حذف العنصر ذو المُعرِّف "selected" من جميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="javascript"> | </syntaxhighlight>حذف العنصر ذو المُعرِّف <code>"selected"</code> من جميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="javascript"> | ||
$( "p" ).not( "#selected" ); | $( "p" ).not( "#selected" ); | ||
</syntaxhighlight>حذف جميع العناصر التي تطابق "div p.selected" من جميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="javascript"> | </syntaxhighlight>حذف جميع العناصر التي تطابق <code>"div p.selected"</code> من جميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>:<syntaxhighlight lang="javascript"> | ||
$( "p" ).not( $( "div p.selected" ) ); | $( "p" ).not( $( "div p.selected" ) ); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر == | == مصادر == | ||
* [http://api.jquery.com/not/ صفحة التابع .not() في توثيق jQuery الرسمي.] | * [http://api.jquery.com/not/ صفحة التابع .not() في توثيق jQuery الرسمي.] | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Traversing]] | [[تصنيف:jQuery Traversing]] | ||
المراجعة الحالية بتاريخ 08:00، 6 يونيو 2018
.not( [selector ] )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يحذف هذا التابع عناصر محدَّدة من مجموعة من العناصر المطابقة.
.not( selector )
أُضيف مع الإصدار: 1.0.
selector
سلسلة نصية تحتوي على تعبير محدِّد، أو عنصر DOM، أو مصفوفة من العناصر لمطابقة مجموعة معينة من العناصر.
.not( function )
أُضيف مع الإصدار: 1.4.
function
دالة من الشكل Function( Number index, Element element ) تعيد قيمة منطقيَّة Boolean، وتُستعمَل للتحقُّق من كلِّ عنصر من عناصر المجموعة. تقبل هذه الدالة وسيطين؛ الأول index وهو فهرس العنصر في مجموعة jQuery، والثاني element وهو عنصر DOM. يشير this ضمن الدالة إلى عنصر DOM الحالي.
.not( selection )
أُضيف مع الإصدار: 1.4.
selection
كائن jQuery موجود ويستعمل لمطابقة مجموعة العناصر الحالية.
عند إعطاء التابع .not() كائن jQuery يمثِّل مجموعة عناصر DOM، فسيُنشئ كائن jQuery جديد من مجموعة فرعيَّة تحتوي على العناصر المطابقة. سيُطابق كل عنصر مع الوسيط selector المُعطى وستضاف العناصر التي لا تتطابق إلى النتيجة المعادة.
إن كان لدينا صفحة تحتوي على قائمة بسيطة <ul> مثل:
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
<li>العنصر الرابع</li>
<li>العنصر الخامس</li>
</ul>
يمكننا تطبيق هذا التابع على مجموعة عناصر القائمة تلك:
$( "li" ).not( ":even" ).css( "background-color", "red" );
ستغير هذه الشيفرة لون خلفية العنصر الثاني والرابع إلى الأحمر لأنَّهما لم يطابقان المحدِّد (أعد تطبيق الشيفرة مع استعمال فهرس صفري مع المحدد :even والمحدد :odd).
حذف عناصر محدَّدة
الإصدار الثاني من التابع .not() يسمح لنا بحذف العناصر من المجموعة المطابقة بفرض أنَّه وجدنا هذه العناصر مسبقًا باستعمال وسائل أخرى. إن كانت مثلًا القائمة في المثال السابق تحتوي على عنصر يملك مُعرِّف (id) مثل:
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li id="notli">العنصر الثالث</li>
<li>العنصر الرابع</li>
<li>العنصر الخامس</li>
</ul>
يمكننا العثور على هذا العنصر (العنصر الثالث في القائمة) باستعمال الدالة getElementById() الأساسية في JavaScript ثم إزالتها من كائن jQuery:
$( "li" ).not( document.getElementById( "notli" ) )
.css( "background-color", "red" );
تغيِّر هذه الشيفرة لون العنصر الأول والثاني والرابع والخامس. يمكننا إنجاز هذا الأمر بشكل مماثل باستعمال تعبير jQuery أبسط إلَّا أن هذه التقنية مفيدة عندما توفر مكتبات أخرى مثلًا مرجعًا إلى عُقد DOM مجردة.
بدءًا من الإصدار jQuery 1.4، أصبح التابع .not() يقبل دالةً كوسيطٍ ممرَّر إليها بالطريقة ذاتها التي يقبل بها التابع .filter() دالةً. ستُستثنى العناصر التي يعيد التابع من أجلها القيمة true من المجموعة المطابقة، وستبقى بقية العناصر الأخرى.
ملاحظة: عندما يمرَّر محدِّد CSS إلى التابع .not()، فستُحذف العُقد النصية (text nodes) وعقد التعليق (comment nodes) دومًا من كائن jQuery الناتج خلال عمليَّة الترشيح. عندما تمرَّر عقدة محدَّدة أو مصفوفة من العقد، فلن تُحذف العقد النصية وعقد التعليق من كائن jQuery إن طابقت أحد عقد مصفوفة الترشيح.
أمثلة
إضافة إطار (border) إلى العناصر <div> التي ليست خضراء أو زرقاء:
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>not مثالٌ عن استعمال التابع</title>
<style>
div {
width: 50px;
height: 50px;
margin: 10px;
float: left;
background: yellow;
border: 2px solid white;
}
.green {
background: #8f8;
}
.gray {
background: #ccc;
}
#blueone {
background: #99f;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div id="blueone"></div>
<div></div>
<div class="green"></div>
<div class="green"></div>
<div class="gray"></div>
<div></div>
<script>
$( "div" ).not( ".green, #blueone" )
.css( "border-color", "red" );
</script>
</body>
</html>
حذف العنصر ذو المُعرِّف "selected" من جميع الفقرات <p>:
$( "p" ).not( $( "#selected" )[ 0 ] );
حذف العنصر ذو المُعرِّف "selected" من جميع الفقرات <p>:
$( "p" ).not( "#selected" );
حذف جميع العناصر التي تطابق "div p.selected" من جميع الفقرات <p>:
$( "p" ).not( $( "div p.selected" ) );