jQuery 3.3

.text()




jquery
احصل على محتويات النص المدمجة لكل عنصر في مجموعة العناصر المتطابقة ، بما في ذلك أحفادها ، أو قم بتعيين محتويات النص الخاصة بالعناصر المتطابقة.

.text () إرجاع: String

الوصف: احصل على محتويات النص المدمجة لكل عنصر في مجموعة العناصر المتطابقة ، بما في ذلك أحفادها.

  • الإصدار المضافة: 1.0 .text()

    • هذه الطريقة لا تقبل أي حجج.

بخلاف طريقة .html() ، يمكن استخدام .text() في مستندات XML و HTML. نتيجة أسلوب .text() هي سلسلة تحتوي على النص المدمج لجميع العناصر المتطابقة. (بسبب الاختلافات في موزعي HTML في مستعرضات مختلفة ، قد يختلف النص الذي تم إرجاعه في الخطوط الجديدة والمساحة البيضاء الأخرى.) خذ بعين الاعتبار HTML التالي:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

رمز $( "div.demo-container" ).text() قد ينتج عن النتيجة التالية:

Demonstration Box list item 1 list item 2

لا يمكن استخدام الطريقة .text() في مدخلات النموذج أو البرامج النصية. لتعيين أو الحصول على القيمة النصية لعناصر input أو textarea ، استخدم الطريقة .val() . للحصول على قيمة عنصر البرنامج النصي ، استخدم طريقة .html() .

اعتبارًا من jQuery 1.4 ، ترجع الطريقة .text() قيمة النص وعقد CDATA بالإضافة إلى عقد العنصر.

مثال:

ابحث عن النص في الفقرة الأولى (تجريد html) ، ثم قم بتعيين html من الفقرة الأخيرة لإظهار أنه نص فقط (اختفى الخط الغامق باللون الأحمر).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  b {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p><b>Test</b> Paragraph.</p>
<p></p>
 
<script>
var str = $( "p:first" ).text();
$( "p:last" ).html( str );
</script>
 
</body>
</html>

عرض:

.text (نص) الإرجاع: jQuery

الوصف: قم بتعيين محتوى كل عنصر في مجموعة العناصر المتطابقة على النص المحدد.

  • الإصدار المضافة: 1.0 . النص (النص)

    • نص
      النوع: String أو Number أو Boolean
      النص المطلوب تعيينه كمحتوى لكل عنصر متطابق. عندما يتم توفير رقم أو منطقي ، سيتم تحويله إلى تمثيل سلسلة.
  • الإصدار المضافة: 1.4 . النص (وظيفة)

    • وظيفة
      النوع: Function (فهرس Integer ، نص String ) => String
      دالة تعيد محتوى النص إلى التعيين. يستقبل موضع فهرس العنصر في المجموعة وقيمة النص القديمة كوسيطة.

بخلاف طريقة .html() ، يمكن استخدام .text() في مستندات XML و HTML.

نحتاج إلى الانتباه إلى أن هذه الطريقة تفلت من السلسلة المقدمة عند الضرورة بحيث يتم عرضها بشكلٍ صحيح في HTML. للقيام بذلك ، فإنه يستدعي أسلوب DOM .createTextNode() ، لا تفسير السلسلة كـ HTML. خذ بعين الاعتبار HTML التالية:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

الرمز $( "div.demo-container" ).text( "<p>This is a test.</p>" ); سوف تنتج ناتج DOM التالي:

<div class="demo-container">
  &lt;p&gt;This is a test.&lt;/p&gt;
</div>

ستظهر في صفحة تم تقديمها كما لو كانت العلامات معروضة ، على النحو التالي:

<p>This is a test</p>

لا يمكن استخدام الطريقة .text() في عناصر الإدخال. بالنسبة لنص حقل الإدخال ، استخدم الطريقة .val() .

اعتبارًا من jQuery 1.4 ، تسمح لنا طريقة .text() بتعيين محتوى النص بالمرور في وظيفة.

$( "ul li" ).text(function( index ) {
  return "item number " + ( index + 1 );
});

في ضوء قائمة غير مرتبة تحتوي على ثلاثة عناصر <li> ، سيؤدي هذا المثال إلى إخراج ناتج DOM التالي:

<ul>
  <li>item number 1</li>
  <li>item number 2</li>
  <li>item number 3</li>
</ul>

مثال:

أضف نصًا إلى الفقرة (لاحظ أن العلامة الغامقة قد هربت).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text demo</title>
  <style>
  p {
    color: blue;
    margin: 8px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Test Paragraph.</p>
 
<script>
$( "p" ).text( "<b>Some</b> new text." );
</script>
 
</body>
</html>

عرض: