contents()

.contents( )

מחזירה: jQuery

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

.contents( )

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

אובייקט הנתון jQuery מציג סט של אלמנטים DOM, שיטה .contents() מאפשרת לנו לחפש בין הילדים המיידים של אלמנטים האלה בעץ DOM וליצור אובייקט חדש של jQuery מאלמנטים המתאימים. שיטות .contents() ו- .children() דומות, פרט לזה, ששיטה ראשונה מכילה צמתי טקסט כמו גם אלמנטים HTML באובייקט התוצאה של jQuery.

שיטה .contents() ניתן לשמש כדי לקבל תוכן של מסמך ב- iframe, אם iframe נמצא באותו דומיין כמו דף ראשי.

נתבונן על <div> פשוט עם מספר צמתים של טקסט, כל אחד מהם מופרד עם שתי שבירות שורה (<br />):

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  <br /><br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat.
  <br /> <br />
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur.
</div>

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

$('.container').contents().filter(function() {
  return this.nodeType == 3;
})
  .wrap('<p></p>')
.end()
.filter('br')
  .remove();

בהתחלה קוד הזה מקבל תוכן <div class="container">, ואחרי זה מסנן אותו לצמתי טקסט, שעטופים בתגים של פסקאות. הדבר נעשה על ידי בדיקת אלמנט מאפיין .nodeType. מאפיין DOM הזה מכיל קוד מספרי, שמציין סוג של צומת; צומת טקסט משמש קוד 3. התכנים מסוננים שוב, הפעם לפי אלמנטים <br />, ואלמנטים האלה נמחקים.

דוגמאות

דוגמה 1

מחפש כל הצמתים של טקסט בתוך הפסקה ועוטף אותם עם תג bold.

$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");

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

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");
  });
  </script>

</head>
<body>
  <p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מוסיף תוכן חדש בתוך iframe רייק.

$("iframe").contents().find("body").append("I'm in an iframe!");

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

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">

  $(document).ready(function(){
$("iframe").contents().find("body").append("I'm in an iframe!");  });
  </script>
  
</head>
<body>
  <iframe src="/index-blank.html" width="300" height="100"></iframe>

</body>
</html>

נסה זאת בעצמך

דוגמה 3

מחליף צבע רקע של הקישורים בתוך iframe.

$("#frameDemo").contents().find("a").css("background-color","#BADA55");

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

נסה זאת בעצמך

דוגמה 3 - קוד מלא:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
     $(document).ready(function(){
       $("#frameDemo").contents().find("a").css("background-color","#BADA55");
     });
  </script>
</head>
<body>
	<iframe src="http://xhtml.co.il/he/" width="100%" height="600" id='frameDemo'></iframe> 
</body>
</html>

נסה זאת בעצמך

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

כן לא

contents()

.contents( )

.contents( )

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

דוגמה 3

דוגמה 3 - קוד מלא:

תגובות