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 /> 要素に対して、これらの要素が削除されます。