.contents()

.contents( ) 1.2追加

戻り値:jQuery

テキストやHTMLコメントを含む子要素を取得します。

  • .children()との違いは、テキストノード、コメントノードも対象とする点です。
  • iframe(同じドメイン内)を参照する際に、よく使用されるメソッドです。

デモ

テキストノードをBRで区切った整理されていないHTMLを、 contents()メソッドを使って、それぞれの段落を<P>で囲って修正しています。


<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>p {border:1px red solid;}</style>
</head>
<body>
<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>
<script>
  $('.container').contents().filter(function() {
    return this.nodeType == 3;
  })
  .wrap('<p></p>')
  .end()
  .filter('br')
    .remove();
</script>
</body>
</html>

P要素内のテキストノードを取り出して、Bタグで囲います。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>こんにちは、<a href="http://ejohn.org/">ジョン</a>。 調子はどうですか?</p>
<script>
  $("p").contents().filter(function(){
    return this.nodeType != 1;
  }).wrap("<b/>");
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM