التابع .find() في jQuery
.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>