jQueryを使ってHTML要素の取得をする際には
「.html()」メソッドなどを使用することが多くありますが
自分自身を含めた要素を取得したい場合には「.html()」メソッドでは
思い通りにいかなかったりします。
そのような場面で自分自身を含めた要素を取得する方法を
自分用のメモ書きとしてご紹介してみます。
jQueryで自分自身を含めた要素を取得する方法
例として下記のようなHTML構成の要素があったとします。
◆HTML <div id="example"> <p>このテキストはダミーです</p> </div>
このID「#example」に対して、
「.html()」メソッドを使って要素を取得する場合は以下のようになります。
◆SCRIPT var html = $('#example').html();
この「.html()」メソッドを使って取得した
結果はidの中身となる下記の部分しか取得できません。
◆取得結果 <p>このテキストはダミーです</p>
「#example」の中身だけが取得された状態になります。
これを自分自身となるID「#example」を含めた形で取得させるには
「.prop(‘outerHTML’)」を使用します。
この「.prop(‘outerHTML’)」で要素を取得する場合は
以下のように行います。
◆SCRIPT var html = $('#example').prop('outerHTML');
この「.prop(‘outerHTML’)」を使用して取得した場合は
自分自身となるID「#example」を含めた形での結果となります。
◆取得結果 <div id="example"> <p>このテキストはダミーです</p> </div>
このように「.prop(‘outerHTML’)」を使用して要素を取得すると
自分自身を含めた形で取得することが可能になります。
以上がjQueryで自分自身を含めた要素を取得する方法についてでした。
サンプルではIDの取得で解説しましたが
classやタグ自体で要素の取得する場合も同様になります。
jQueryで自分自身を含めた要素を取得する際にぜひ。。。