ホーム > html (全6件)
  • 自要素のHTMLを取得する

    IDがtr1のtd要素のHTMLを取得して連結する。

    var new_tr = '';
$( '#tr1 > td' ).each( function () {
	new_tr += $(this).context.outerHTML;
} );

    html関数で取得できるのは自要素が内包する部分のみなので、自要素（この例ではtd要素）を含む場合はcontext.outerHTMLを参照する。

    キーワード:
  • リストを並び替える

    リスト（idがranking）の内容をdata-count属性の値で昇順に並び替える。

    $('ul#ranking' ).html(
	$('ul#ranking > li' ).sort(
		function ( _a, _b ) {
			return parseInt( $(_a).data( 'count' ) ) < parseInt( $(_b).data( 'count' ) ) ? -1 : 1;
		}
	)
);

    sort関数のコールバック関数で評価対象となる_a要素と_b要素の値（ここではdata-count属性）を判定し、正または負の値を返すだけ。比較演算子の向きを変えれば降順にできる。なおこの例ではul要素を並び替えたが、table要素も同様に並び替えできる。

    キーワード:
  • コンテンツを挿入する

    IDがlistのUL要素内の先頭にLI要素を挿入する

    $('ul#list').prepend( '<li>アイテム0</li>' );

<!-- html部分 -->
<ul id="list">
<li>アイテム1</li>
<li>アイテム2</li>
</ul>

    機能は、$('ul#list').html( '<li>アイテム0</li>'+$('ul#list').html() );と同じ。なお末尾に追加する場合はappend関数を使う。

    キーワード:
  • コンテンツを追加する

    IDがlistのUL要素内の末尾にLI要素を追加する。

    $('ul#list').append( '<li>アイテム3</li>' );

<!-- html部分 -->
<ul id="list">
<li>アイテム1</li>
<li>アイテム2</li>
</ul>

    機能は、$('ul#list').html( $('ul#list').html()+'<li>アイテム3</li>' );と同じ。なお先頭に挿入する場合はprepend関数を使う。

    キーワード:
  • 要素を空にする

    IDがcontentの要素を空にする。

    $( '#content' ).empty();

    $( '#content' ).html( '' ) で問題ないような気もする。

    キーワード:
  • HTMLエンティティを適切な文字に変換する

    変数textの内容を（phpのhtml_entity_decode関数のように）HTMLエンティティを適切な文字に変換する。

    var decode_text = $( '<textarea />' ).html( text ).text();

    &、などのHTMLエンティティを、&、などの文字に変換することができる。この例ではtextarea要素を使っているが、div要素など他の要素でも問題はない。

    キーワード:
 
 
ツールバーへスキップ