web-dev-qa-db-ja.com

jQueryで内部テキストを選択する

_<div class="boxen checkedzahlen" id="box41_0_1">
 41
 <input type="checkbox" value="1" name="cb41_0_1" id="cb41_0_1" checked="checked"/>
</div>
_

このようなものが表示されますが、$(this)（クラスboxen）をクリックした場合、テキスト_41_をアニメーション化するにはどうすればよいですか？

_this > *_が機能しません。 _this:children_も同様です。

jqueryjquery-selectors
17
Sven Klouem

タイトルが少し紛らわしいため、（私のような）一部の人々は、DOM要素のtextual contentを取得する方法を探すためにこの質問に来るかもしれません。これは次の方法で実現できます。

$("#myselector").text() // returns the content of the element as plain text
36
Mike Chamberlain

$（ "＃divID"）。html（）は内部のテキストを取得します。

5
tuanvt

Divを選択するには、以下を使用します。

$('#box41_0_1')

ボックス全体をアニメートするには、次のようにします

$('#box41_0_1').fadeOut().fadeIn();

または他の アニメーション効果 。

編集：内部テキストのみを選択したい場合、 wrapping divを使用して内部テキストを試すことができますが、あなたが提供したコード、それは私が信じているチェックボックスも選択するでしょう。コード例：

$('#box41_0_1').wrapInner("<span id='span41_0_1'></span>");
$('#span41_0_1').fadeOut().fadeIn();
2
Topher Fangio

Divのコンテンツをスパンにラップし、入力をそのスパンの外に移動することができます。次に、スパンをアニメートできます。このようなもの：

$('.boxen').each(function() {
  var $thisBox = $(this);
  $thisBox.wrapInner('<span></span>');
  $thisBox.find('input').appendTo($thisBox);
});

$('.boxen span').animate({fontSize: '28px'}, 400);

次のように、ストレートDOMスクリプトとjQueryを組み合わせて使用​​することもできます。

$('.boxen').each(function() {
  var newSpan = document.createElement('span');
  newSpan.innerHTML = this.firstChild.nodeValue;
  this.firstChild.nodeValue = '';
  $(this).prepend(newSpan);
});

$('.boxen span').animate({fontSize: '28px'}, 400);

どちらの方法でも機能するはずです。

0
Karl Swedberg