jQueryの要素の操作

以下のページでjQueryやDOMについて学んでいます。 www.mojage.club

本記事は、jQueryの要素の操作について纏めています。

Sponsored Link

要素の操作

要素の追加

.appendTo()を使用することで、ドキュメント内にHTML要素を追加することが出来ます。

$('<div><a></a></div>')
  .find('a')
  .text('jQuery')
  .attr('href', 'http://www.jquery.com')
  .end().appendTo('body'); // end() is used to exit the find() method

.index()

.index()は指定した要素のインデックスを返します。

<div>1</div>
<div>2</div>
<div>3</div>

~~~

  alert($('div').index($('div:last')));  //  3

.text()

.text()は指定した要素全てを連結して返します。

<div>1,</div>
<div>2,</div>
<div>3,</div>
<div>4</div>

~~~

  alert($('div').text());  //  1,2,3,4

正規表現を使用した編集

.replace()と正規表現を使えば、テキストの編集が可能です。

<p>
  I really hate using JavaScript.
  I mean really hate it!
  It is the best shit ever!
</p>

~~~
var $p = $('p');
  // 'hate' を 'love'へ置換
  $p.text($p.text().replace(/hate/ig, 'love'));

  // 'shit'を''へ置換
  $p.text($p.text().replace(/shit/ig, ''));

.contents()

.contents()は指定した要素がもつ要素を全て返します。

<p>I love using jQuery!</p>
<p>I love <strong>really</strong> using jQuery!</p>

~~~

  alert($('p:first').contents().get(0).nodeValue);  // I love using jQuery! [HTML elements exist]

  alert($('p:last').contents().get(0).nodeValue);  //  I love

  alert($('p:last').contents().eq(1).text());  // really [HTML element, not text node]

  alert($('p:last').contents().get(2).nodeValue);  // using jQuery!

.remove()はラッパーから消えない

.remove()を使用しても、jQueryのラッパーセットからは消えません。ですから、以下のようなことも可能です。

<div>remove me</div>

~~~

  $('div').remove().html('<a href="http://www.jQuery.com">jQuery</a>').appendTo('body');

Reference from : jQuery Enlightenment