الفرق بين المراجعتين ل"jQuery/find"
Khaled-yassin (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.find()</code>...') |
ط |
||
| (مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
| سطر 3: | سطر 3: | ||
=== القيمة المعادة === | === القيمة المعادة === | ||
| − | يُعيد كائنًا من النوع [[jQuery/jQuery | + | يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. |
=== الوصف === | === الوصف === | ||
يعيد العناصر السليلة لكل عنصر في المجموعة الحالية من العناصر المُطابقة، والتي تكون مرشحة بواسطة مُحدد، أو كائن jQuery، أو عنصر. | يعيد العناصر السليلة لكل عنصر في المجموعة الحالية من العناصر المُطابقة، والتي تكون مرشحة بواسطة مُحدد، أو كائن jQuery، أو عنصر. | ||
| − | + | === <code>.find( selector )</code> === | |
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0]. | أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0]. | ||
| سطر 18: | سطر 18: | ||
====== element ====== | ====== element ====== | ||
| − | عنصر من النوع [[ | + | عنصر من النوع [[JavaScript/Element|Element]] أو كائن من النوع [[jQuery/jQuery|jQuery]] لمطابقة العناصر معه. |
| − | إذا أُدخل كائن jQuery يمثل مجموعة من عناصر DOM، يسمح لنا التابع <code>.find()</code> بالبحث خلال العناصر السليلة لهذه العناصر في شجرة DOM وإنشاء كائن jQuery جديد من العناصر المطابقة. يتشابه التابع <code>.find()</code> مع التابع <code>[[jQuery/children|.children()]]</code>، إلا أن هذا الأخير يمر فقط على مستوى واحد أسفل شجرة DOM. | + | إذا أُدخل كائن jQuery يمثل مجموعة من عناصر DOM، يسمح لنا التابع <code>.find()</code> بالبحث خلال العناصر السليلة لهذه العناصر في شجرة DOM وإنشاء كائن jQuery جديد من العناصر المطابقة. يتشابه التابع <code>.find()</code> مع التابع <code>[[jQuery/children|.children()]]</code>، إلا أن هذا الأخير يمر فقط على مستوى واحد أسفل شجرة DOM. |
| − | يقبل | + | يقبل الشكل الأول للتابع <code>.find()</code> تعبيرًا مُحددًا من نفس النوع الذي يمكن تمريره إلى الدالة <code>$()</code>. وستُرشَّح العناصر عن طريق اختبار ما إذا كانت تطابق هذا المحدد. تتضمن التعبيرات المسموح بها محددات مثل <code>> p</code> والتي ستجد جميع الفقرات التي هي عناصر سليلة من العناصر الموجودة في كائن jQuery. |
إليك صفحة بها قائمة متداخلة بسيطة:<syntaxhighlight lang="html"> | إليك صفحة بها قائمة متداخلة بسيطة:<syntaxhighlight lang="html"> | ||
| سطر 47: | سطر 47: | ||
</syntaxhighlight>نتيجة هذا الاستدعاء تعطي خلفية حمراء على البنود A و B و 1 و 2 و 3 و C. على الرغم من أن العنصر II يطابق تعبير المحدد، إلا أنه غير مُدرج في النتائج؛ إذ تكون العناصر السليلة فقط هي المرشحة للمطابقة. | </syntaxhighlight>نتيجة هذا الاستدعاء تعطي خلفية حمراء على البنود A و B و 1 و 2 و 3 و C. على الرغم من أن العنصر II يطابق تعبير المحدد، إلا أنه غير مُدرج في النتائج؛ إذ تكون العناصر السليلة فقط هي المرشحة للمطابقة. | ||
| − | بخلاف معظم توابع المرور عبر الشجرة، يكون تعبير المُحدد مطلوبًا عند استدعاء <code>.find()</code>. إذا احتجنا إلى إعادة جميع العناصر السليلة، فيمكننا المرور خلال محدد العام <code>'*'</code> لإنجاز ذلك. | + | بخلاف معظم توابع المرور عبر الشجرة، يكون تعبير المُحدد مطلوبًا عند استدعاء <code>.find()</code>. إذا احتجنا إلى إعادة جميع العناصر السليلة، فيمكننا المرور خلال محدد العام <code>'*'</code> لإنجاز ذلك. |
| − | يُطبَّق [[jquery/selector context| | + | يُطبَّق [[jquery/selector context|محدد السياق]] عند استخدام التابع <code>.find()</code>؛ لذلك فإن <code>$( "li.item-ii" ).find( "li" )</code> يعادل <code>$( "li", "li.item-ii" )</code>. |
بدءًا من jQuery 1.6، يمكننا كذلك ترشيح التحديد بواسطة مجموعة jQuery معينة أو عنصر معين. مع نفس القائمة المتداخلة السابقة، إذا بدأنا بما يلي:<syntaxhighlight lang="jquery"> | بدءًا من jQuery 1.6، يمكننا كذلك ترشيح التحديد بواسطة مجموعة jQuery معينة أو عنصر معين. مع نفس القائمة المتداخلة السابقة، إذا بدأنا بما يلي:<syntaxhighlight lang="jquery"> | ||
| سطر 64: | سطر 64: | ||
=== أمثلة === | === أمثلة === | ||
| − | البحث بدءًا بجميع الفقرات عن عناصر <code>span</code> السليلة، | + | البحث بدءًا بجميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> عن عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> السليلة، كما لو استعملنا <code>$( "p span" )</code>:<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 83: | سطر 83: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </syntaxhighlight>التحديد باستخدام مجموعة jQuery | + | </syntaxhighlight>التحديد باستخدام مجموعة jQuery تحتوي جميع عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code>. وتغيير لون جميع عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> داخل عناصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> إلى اللون الأحمر بينما تُترَك البقية باللون الأزرق:<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 109: | سطر 109: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </syntaxhighlight>إضافة <code>span</code> حول كل كلمة ثم إضافة تنسيق عند مرور مؤشر الفأرة فوق العنصر (hover) وإمالة الكلمات التي تحوي حرف t | + | </syntaxhighlight>إضافة العنصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> حول كل كلمة ثم إضافة تنسيق عند مرور مؤشر الفأرة فوق العنصر (hover) وإمالة الكلمات التي تحوي حرف t:<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
المراجعة الحالية بتاريخ 13:18، 1 يوليو 2018
.find( selector )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
يعيد العناصر السليلة لكل عنصر في المجموعة الحالية من العناصر المُطابقة، والتي تكون مرشحة بواسطة مُحدد، أو كائن jQuery، أو عنصر.
.find( selector )
أُضيف مع الإصدار: 1.0.
selector
سلسلة نصية من النوع Selector تحتوي على تعبير مُحدد لمطابقة العناصر معه.
.find( element )
أُضيف مع الإصدار: 1.60.
element
عنصر من النوع Element أو كائن من النوع jQuery لمطابقة العناصر معه.
إذا أُدخل كائن jQuery يمثل مجموعة من عناصر DOM، يسمح لنا التابع .find() بالبحث خلال العناصر السليلة لهذه العناصر في شجرة DOM وإنشاء كائن jQuery جديد من العناصر المطابقة. يتشابه التابع .find() مع التابع .children()، إلا أن هذا الأخير يمر فقط على مستوى واحد أسفل شجرة DOM.
يقبل الشكل الأول للتابع .find() تعبيرًا مُحددًا من نفس النوع الذي يمكن تمريره إلى الدالة $(). وستُرشَّح العناصر عن طريق اختبار ما إذا كانت تطابق هذا المحدد. تتضمن التعبيرات المسموح بها محددات مثل > p والتي ستجد جميع الفقرات التي هي عناصر سليلة من العناصر الموجودة في كائن jQuery.
إليك صفحة بها قائمة متداخلة بسيطة:
<ul class="level-1">
<li class="item-i">I</li>
<li 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>
إذا بدأنا من العنصر II، فيمكننا العثور على عناصر القائمة داخلها:
$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );
نتيجة هذا الاستدعاء تعطي خلفية حمراء على البنود A و B و 1 و 2 و 3 و C. على الرغم من أن العنصر II يطابق تعبير المحدد، إلا أنه غير مُدرج في النتائج؛ إذ تكون العناصر السليلة فقط هي المرشحة للمطابقة.
بخلاف معظم توابع المرور عبر الشجرة، يكون تعبير المُحدد مطلوبًا عند استدعاء .find(). إذا احتجنا إلى إعادة جميع العناصر السليلة، فيمكننا المرور خلال محدد العام '*' لإنجاز ذلك.
يُطبَّق محدد السياق عند استخدام التابع .find()؛ لذلك فإن $( "li.item-ii" ).find( "li" ) يعادل $( "li", "li.item-ii" ).
بدءًا من jQuery 1.6، يمكننا كذلك ترشيح التحديد بواسطة مجموعة jQuery معينة أو عنصر معين. مع نفس القائمة المتداخلة السابقة، إذا بدأنا بما يلي:
var allListElements = $( "li" );
ثم مررنا كائن jQuery هذا للبحث عنه:
$( "li.item-ii" ).find( allListElements );
سيؤدي هذا إلى إعادة مجموعة jQuery تحتوي فقط على عناصر القائمة سليلة من العنصر II. وبالمثل، يمكن أيضًا تمرير عنصر للعثور عليه:
var item1 = $( "li.item-1" )[ 0 ];
$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );
تعطي نتيجة هذا الاستدعاء خلفية حمراء على العنصر I.
أمثلة
البحث بدءًا بجميع الفقرات <p> عن عناصر <span> السليلة، كما لو استعملنا $( "p span" ):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>find demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$( "p" ).find( "span" ).css( "color", "red" );
</script>
</body>
</html>
التحديد باستخدام مجموعة jQuery تحتوي جميع عناصر <span>. وتغيير لون جميع عناصر <span> داخل عناصر <p> إلى اللون الأحمر بينما تُترَك البقية باللون الأزرق:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>find demo</title>
<style>
span {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<div>Did you <span>eat</span> yet?</div>
<script>
var spans = $( "span" );
$( "p" ).find( spans ).css( "color", "red" );
</script>
</body>
</html>
إضافة العنصر <span> حول كل كلمة ثم إضافة تنسيق عند مرور مؤشر الفأرة فوق العنصر (hover) وإمالة الكلمات التي تحوي حرف t:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>find demo</title>
<style>
p {
font-size: 20px;
width: 200px;
color: blue;
font-weight: bold;
margin: 0 10px;
}
.hilite {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
When the day is short
find that which matters to you
or stop believing
</p>
<script>
var newText = $( "p" ).text().split( " " ).join( "</span> <span>" );
newText = "<span>" + newText + "</span>";
$( "p" )
.html( newText )
.find( "span" )
.hover(function() {
$( this ).addClass( "hilite" );
}, function() {
$( this ).removeClass( "hilite" );
})
.end()
.find( ":contains('t')" )
.css({
"font-style": "italic",
"font-weight": "bolder"
});
</script>
</body>
</html>