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で自分自身を含めた要素を取得する際にぜひ。。。