after()

.after( content )

מחזירה: jQuery

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

.after( content )

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

content

מחרוזת, אלמנט, אובייקט

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

.after( function(index) )

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

function(index)

פונקציה

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

שיטות .after() ו- .insertAfter() מבצעות את אותן משימות. ההבדל העיקרי הוא התחביר, מיקום התוכן והיעד. עם .after(), ביטוי בחירה שקודם לשיטה הוא המיכל שאחריו יוכנס התוכן. עם .insertAfter(), מצד שני, תוכן הקודם לשיטה, כמו גם סלקטור של הביטוי, או סימון מיוצר בלטוס, ומוכנס אחרי המיכל היעד.

נבחן HTML הבא:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

אנחנו יכולים ליצור תוכן ולהכניס אותו למספר אלמנטים בו זמנית:

$('.inner').after('<p>Test</p>');

כל אלמנט <div class="inner"> יקבל תוכן חדש:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

אנחנו גם יכולים לבחור אלמנט בדף ולהכניס אותו אחרי אלמנט אחר:

$('.container').after($('h2'));

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

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

אם קיים יותר מאלמנט היעד אחד, לעומת זאת, ישוכפלו עותקים עבור כל היעד אחרי הראשון.

הוספת צמתי DOM מנותקים

החל מ- jQuery 1.4, ש .before() ו- .after() עובדים גם על צמתי DOM מנותקים. לדוגמה, נתון קוד הבא:

$('<div/>').after('<p></p>');

התוצאה היא רשימת jQuery, המכילה div ופסקה, לפי הסדר שלהם. אנחנו יכולים להמשיך לתפעל את הרשימה, אפילו לפני הכנסתה במסמך.

$('<div/>').after('<p></p>').addClass('foo')
  .filter('p').attr('id', 'bar').html('hello')
.end()
.appendTo('body');

זה יגרום לכך שאלמנטים הבאים יכנסו מייד לפני תג סגירה של </body>:

<div class="foo"></div>
<p class="foo" id="bar">hello</p>

החל מ- jQuery 1.4, שיטה .after() מאפשרת לנו לשלוח פונקציה שמחזירה אלמנטים להכנסה.

$('p').after(function() {
  return '<div>' + this.className + '</div>';
});

זה יכניס <div> אחרי כל פסקה, שמכילה שם המחלקה/ות של כל פסקה.

דוגמאות

דוגמה 1

מוסיף קוד HTML אחרי כל הפסקאות.

$("p").after("<b>Hello</b>");

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("p").after("<b>Hello</b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מוסיף אלמנט DOM אחרי כל הפסקאות.

$("p").after( document.createTextNode("Hello") );

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("p").after( document.createTextNode("Hello") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

נסה זאת בעצמך

דוגמה 3

מוסיף אובייקט jQuery ( דומה למערך של אלמנטים DOM ) אחרי כל הפסקאות.

$("p").after( $("b") );

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("p").after( $("b") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <b>Hello</b>
  <p>I would like to say: </p>
</body>
</html>

נסה זאת בעצמך

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

כן לא

after()

.after( content )

.after( content )

.after( function(index) )

הוספת צמתי DOM מנותקים

דוגמאות

דוגמה 1

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

דוגמה 2

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

דוגמה 3

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

תגובות