الفرق بين المراجعتين لصفحة: «jQuery/find»

المراجعة الحالية بتاريخ 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" )‎:

<!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 تحتوي جميع عناصر . وتغيير لون جميع عناصر  داخل عناصر  إلى اللون الأحمر بينما تُترَك البقية باللون الأزرق:

<!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>

إضافة العنصر  حول كل كلمة ثم إضافة تنسيق عند مرور مؤشر الفأرة فوق العنصر (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>

مصادر

صفحة المحدد ‎‎‎.find()‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في توثيق jQuery الرسمي.

@@ سطر 3: / سطر 3: @@
 === القيمة المعادة ===
-يُعيد كائنًا من النوع [[jQuery/jQuery/|jQuery]].
+يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].
 === الوصف ===
 يعيد العناصر السليلة لكل عنصر في المجموعة الحالية من العناصر المُطابقة، والتي تكون مرشحة بواسطة مُحدد، أو كائن jQuery، أو عنصر.
-==== <code>‎.find( selector )‎</code> ====
+=== <code>‎.find( selector )‎</code> ===
 أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0].
@@ سطر 18: / سطر 18: @@
 ====== element ======
-عنصر من النوع [[jQuery//Element|Element]] أو كائن من النوع [[jQuery/jQuery|jQuery]] لمطابقة العناصر معه.
+عنصر من النوع [[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.
+يقبل الشكل الأول للتابع ‎<code>.find()</code>‎ تعبيرًا مُحددًا من نفس النوع الذي يمكن تمريره إلى الدالة ‎<code>$()</code>‎‎. وستُرشَّح العناصر عن طريق اختبار ما إذا كانت تطابق هذا المحدد. تتضمن التعبيرات المسموح بها محددات مثل ‎<code>> p</code> والتي ستجد جميع الفقرات التي هي عناصر سليلة من العناصر الموجودة في كائن jQuery.
 إليك صفحة بها قائمة متداخلة بسيطة:<syntaxhighlight lang="html">
@@ سطر 47: / سطر 47: @@
 </syntaxhighlight>نتيجة هذا الاستدعاء تعطي خلفية حمراء على البنود A و B و 1 و 2 و 3 و C. على الرغم من أن العنصر II يطابق تعبير المحدد، إلا أنه غير مُدرج في النتائج؛ إذ تكون العناصر السليلة فقط هي المرشحة للمطابقة.
-بخلاف معظم توابع المرور عبر الشجرة، يكون تعبير المُحدد مطلوبًا عند استدعاء ‎<code>.find()</code>. إذا احتجنا إلى إعادة جميع العناصر السليلة، فيمكننا المرور خلال محدد العام <code>'*'</code> لإنجاز ذلك.
+بخلاف معظم توابع المرور عبر الشجرة، يكون تعبير المُحدد مطلوبًا عند استدعاء ‎<code>.find()‎</code>. إذا احتجنا إلى إعادة جميع العناصر السليلة، فيمكننا المرور خلال محدد العام <code>'*'</code> لإنجاز ذلك.
-يُطبَّق [[jquery/selector context|سياق محدد]] عند استخدام التابع ‎<code>.find()</code>‎؛ لذلك فإن ‎<code>$( "li.item-ii" ).find( "li" )</code>‎ يعادل <code>‎$( "li", "li.item-ii" )</code>‎.
+يُطبَّق [[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">
@@ سطر 64: / سطر 64: @@
 === أمثلة ===
-البحث بدءًا بجميع الفقرات عن عناصر <code>span</code> السليلة، مثل <code>‎$( "p span" )‎</code>.<syntaxhighlight lang="html">
+البحث بدءًا بجميع الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> عن عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> السليلة، كما لو استعملنا <code>‎$( "p span" )‎</code>:<syntaxhighlight lang="html">
 <!doctype html>
 <html lang="en">
@@ سطر 83: / سطر 83: @@
 </body>
 </html>
-</syntaxhighlight>التحديد باستخدام مجموعة jQuery لجميع علامات <code>span</code>. وتغيير جميع <code>span</code> داخل وسوم <code>p</code> إلى اللون الأحمر بينما يترك غير ذلك باللون الأزرق.<syntaxhighlight lang="html">
+</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>
 <html lang="en">
@@ سطر 109: / سطر 109: @@
 </body>
 </html>
-</syntaxhighlight>إضافة <code>span</code> حول كل كلمة ثم إضافة تنسيق عند مرور مؤشر الفأرة فوق العنصر (hover) وإمالة الكلمات التي تحوي حرف t.<syntaxhighlight lang="html">
+</syntaxhighlight>إضافة العنصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> حول كل كلمة ثم إضافة تنسيق عند مرور مؤشر الفأرة فوق العنصر (hover) وإمالة الكلمات التي تحوي حرف t:<syntaxhighlight lang="html">
 <!doctype html>
 <html lang="en">