web-dev-qa-db-fra.com

Sélectionnez le texte intérieur avec 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>

Quelque chose comme cela est donné, comment puis-je animer le texte 41, Si on clique sur $(this) (la classe boxen)?

this > * Ne fonctionne pas. this:children Non plus.

jqueryjquery-selectors
17
Sven Klouem

En raison du titre légèrement déroutant, certaines personnes (comme moi) peuvent venir à cette question en cherchant comment obtenir le contenu textuel d'un élément DOM. Vous pouvez accomplir cela en:

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

$ ("# divID"). html () obtiendrait le texte à l'intérieur.

5
tuanvt

Afin de sélectionner le div, vous utiliseriez ce qui suit:

$('#box41_0_1')

Pour animer toute la boîte, vous pouvez faire

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

ou un autre effet d'animation .

Modifier: Si vous souhaitez sélectionner uniquement le texte interne, vous pouvez essayer habillage le texte interne avec un div, mais avec le code que vous avez fourni, qui cocherait également la case je crois. Exemple de code:

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

Vous pouvez envelopper le contenu de la div dans une plage, puis déplacer l'entrée en dehors de cette plage. Ensuite, vous pouvez animer la durée. Quelque chose comme ça:

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

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

Vous pouvez également mélanger et associer des scripts DOM directs avec jQuery, comme ceci:

$('.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);

Dans les deux cas, cela devrait fonctionner.

0
Karl Swedberg