.after()

.after( content ) 返回:jQuery

描述: 根据参数设定在每一个匹配的元素之后插入内容。

  • version added: 1.0.after( content )

    content一个元素,HTML字符串,或者jQuery对象,用来插在每个匹配元素的后面。

  • version added: 1.4.after( function(index) )

    function(index)一个返回HTML字符串的函数,这个字符串会被插入到每个匹配元素的后面。

.after().insertAfter()实现同样的功能。主要的不同是语法——特别是内容和目标的位置。 对于 .after(), 选择表达式在函数的前面,参数是将要插入的内容。 对于.insertAfter(), 刚好相反,内容在方法前面,它将被放在参数里元素的后面。

请看下面的HTM

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

我们可以创建内容然后同时插在好几个元素后面:

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

新得到的内容:

<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>');

结果是一个包含一个div和一个段落的JQuery集合。因此,我们可以更进一步操作这个集合,即使在将它插入document之前。

$('<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><div>里面是该段落的class名称。

例子:

例如: 在所有的段落后插入一些HTML。

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

</body>
</html>

Demo:

例如:在所有的段落后插入一个DOM元素。

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

</body>
</html>

Demo:

例如:在所有段落后插入一个jQuery对象。

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

</body>
</html>

Demo:

设计酷,jquery1.6 api中文手册