jquery 構成要素の取得

基本

あまり使うコトは無いと思う。

やりたいことは、下記の「#zebra」直下の子要素をゴニョゴニョしたい。

<div id="zebra">
<h1>○○○</h1>
<p>○○○○</p>
○○○○
<p>○○○○</p>
</div>

※「h1タグ、pタグ、タグなしの文字列、pタグ」が順番で取得希望。

取得したHTMLを「$()」に放り込めばOK

var obj = $($('#zebra')[0].innerHTML);

HTML自体を直接記入するなら下記のような感じ。

var obj = $('<h1>○○○</h1><p>○</p>');

あとは、ループでまわしてゴニョゴニョすればOK
※「タグありの文字列」は「○○○[○].tagName」でタグが取得可能だけど、「タグなしの文字列」は「○○○[○].tagName」が取得できない。

注意１

下記のように空白類が含まれる場合、「$()」で、空白も取得される

<div id="zebra">
   <h1>○○○</h1>
   <p>○○○○</p>
   ○○○○
   <p>○○○○</p>
</div>

※前述と違ってインデントが入っている。

注意２

タグで囲まれていないテキストで終わる場合、それが取得されない。

// ▼通常（タグで囲まれているテキストで終わる場合）
var objA = $('<h1>○1○</h1>○2○<p>○3○</p>');
// objA[0].outerHTML : <h1>○1○</h1>
// objA[1].outerHTML : ○2○
// objA[2].outerHTML : <p>○3○</p>

// ▼タグで囲まれていないテキストで終わる場合
var objB = $('<h1>○1○</h1><p>○2○</p>○3○');
// objB[0].outerHTML : <h1>○1○</h1>
// objB[1].outerHTML : <p>○2○</p>
// objB[2] : 無し

対処

最後に適当なタグを付けてやればOK。

▼適当なタグを最後に付けてから配列にして取得（get()）。その後、配列の最後の要素を削除（pop()）して、ループ処理。

var dom = $($(○○○)[0].innerHTML + '<div></div>').get();
dom.pop();
for ( var i in dom ) {
   ～処理～
}

※「<br />」でも良いと思うけど、気持ち的に「<div></div>」にしてみた。