text()

תוכן:

text()
- .text()
text( textString )
- .text( textString )
- .text( function(index, text) )

.text()

תיאור: מקבל תוכן טקסט משולב של כל אלמנט ברשימת אלמנטים בהתאמה, כולל צאצאיהם.

.text()

הוספה בגרסה: 1.0

בניגוד לשיטה .html(), בשיטה .text() ניתן להשתמש גם במסמכי XML וגם במסמכי HTML. תוצאה של שיטה .text() היא מחרוזת, המכילה טקסט משולב של כל האלמנטים בהתאמה. ( עקב הווריאציות של מנתחי 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() לא ניתן להשתמש עבור אלמנטים קלט. עבור אלמנטים קלט תשתמשו בשיטה .val().

החל מ- jQuery 1.4, שיטה .text() מחזירה ערך טקסט וצמתי CDATA כמו גם צמתי של אלמנטים.

דוגמאות

מחפש טקסט בפסקה ראשונה, על ידי הפשטת קודHTML, אחרי מכניס טקסט בתוך פסקה אחרונה, אבל ללא עיצוב ( נעלם צבע אדום וטקסט מודגש ).

    var str = $("p:first").text();
    $("p:last").html(str);

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    var str = $("p:first").text();
    $("p:last").html(str);
 });
  </script>
  <style>
  p { color:blue; margin:8px; }
  b { color:red; }
  </style>
</head>
<body>
  <p><b>Test</b> Paragraph.</p>
  <p></p>
</body>
</html>

נסה זאת בעצמך

.text( textString )

מחזירה: jQuery

תיאור: מגדיר תוכן של כל אלמנט ברשימת אלמנטים, שתואמים לטקסט המוגדר.

.text( textString )

הוספה בגרסה: 1.0

textString

מחרוזת

מחרוזת טקסט כדי להגדיר כי תוכן עבור כל אלמנט בהמאמה.

.text( function(index, text) )

הוספה בגרסה: 1.4

function(index, text)

פונקציה

פונקציה שמחזירה תוכן של HTML כדי להגדיר. מקבלת אינדקס של מיקום האלמנט ברשימה וערך ישן של HTML בתור ארגומנטים.

בניגוד לשיטה .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>'); יתן תוצאה הבאה:

<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>, דוגמה הזו תתן תוצאה הבאה:

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

דוגמאות

מוסיף טקסט לפסקה, שימו לב, תג b נמלט.

$("p").text("Some new text.");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
$("p").text("<b>Some</b> new text.");
  });
  </script>
  <style>
  p { color:blue; margin:8px; }
  </style>
</head>
<body>
  <p>Test Paragraph.</p>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

text()

.text()

.text()

דוגמאות

קוד מלא:

.text( textString )

.text( textString )

.text( function(index, text) )

דוגמאות

קוד מלא:

תגובות