jQueryの遍歴 - contents()メソッド

段落内のすべてのテキストノードを見つけ、それらを太字タグで包装します。

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

自分で試してみてください

定義と使用法

contents()メソッドは、一致する要素集合の各要素の子节点(テキストやコメントノードを含む)を取得します。

構文

.contents()

詳細な説明

DOM要素集合を表すjQueryオブジェクトが与えられた場合、.contents()メソッドはこれらの要素の直接子节点をDOMツリーから検索し、一致する要素で新しいjQueryオブジェクトを構築することができます。.contents()と .children() 方法は似ていますが、前者はテキストノードと HTML 要素を含む結果の jQuery オブジェクトに包含しています。

.contents() メソッドは、iframe がメインページと同じドメインにある場合、iframe の内容ドキュメントを取得するためにも使用できます。

以下の <div> に注意してください。いくつかのテキストノードがあり、各ノードは 2つの折り返し要素 (<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 属性を通じて実現されています。この属性にはノードタイプを示す数字コードが保存されており、テキストノードはコード 3 を使用します。内容は再びフィルタリングされ、この度は <br /> 要素に対して、これらの要素が削除されます。