17
<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>

Something like this is given, how can I animate the text 41, if $(this) (the class boxen) is clicked?

this > * doesn't work. Neither does this:children.

Keavon
  • 6,837
  • 9
  • 51
  • 79
Sven Klouem
  • 171
  • 1
  • 1
  • 3
  • You need to work on that question. Please post some source code and describe the missing parts. Beside that, on jquery.com, there are examples for such basic things (if I understand you right) – Tim Büthe Oct 29 '09 at 15:04
  • thx, but didn't get the information from the home of "JQuery" ;) the problem is how you select a text .. at the last dom level. if there would be a span .. no problem. – Sven Klouem Oct 29 '09 at 15:06
  • $('.boxen').click(function () { if ($(this).hasClass("hello")){ $(this).removeClass("hello"); } else{ $("this > *").animate({ zIndex: "10", fontSize: "28px" },600).animate({ fontSize: "9px", textAlign: "center", zIndex: "0" }); $(this).addClass("hello"); } }); – Sven Klouem Oct 29 '09 at 15:07
  • how can i turn on syntax highlighting ? – Sven Klouem Oct 29 '09 at 15:07
  • You still need to clarify. Is the problem that you can't select "41" without also selecting the checkbox? – Matt Ball Oct 29 '09 at 15:10
  • @Sven: You can't do it in a comment. – Matt Ball Oct 29 '09 at 15:10

4 Answers4

36

Because of the slightly confusing title, some people (like me) may be coming to this question looking for how to get the textual content of a DOM element. You can accomplish this by:

$("#myselector").text() // returns the content of the element as plain text
Mike Chamberlain
  • 39,692
  • 27
  • 110
  • 158
5

$("#divID").html() would get the text inside.

tuanvt
  • 719
  • 4
  • 12
2

In order to select the div, you would use the following:

$('#box41_0_1')

In order to animate the whole box, you could do

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

or some other animation effect.

Edit: If you want to select only the inner text, you could try wrapping the inner text with a div, but with the code you provided, that would also select the checkbox I believe. Code example:

$('#box41_0_1').wrapInner("<span id='span41_0_1'></span>");
$('#span41_0_1').fadeOut().fadeIn();
Topher Fangio
  • 20,372
  • 15
  • 61
  • 94
  • it's not the problem to select the box, or how to animate it. the problem is, just to get the z-Index on the "41". -> the text inside the div, if i animate the whole thing, things like the border also get the new zIndex. – Sven Klouem Oct 29 '09 at 15:11
  • If you're only looking to select the z-index, "41" will have the same z-index as its parent div. – Matt Ball Oct 29 '09 at 15:11
  • thats the problem.. i just want to set the zindex to the numbers.. without printing a span arround.. – Sven Klouem Oct 29 '09 at 15:16
  • 1
    @Sven I don't believe that is possible. I think you can only set the z-index of an actual element, not it's text. – Topher Fangio Oct 29 '09 at 21:40
0

You could wrap the contents of the div in a span and then move the input outside of that span. Then you can animate the span. Something like this:

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

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

You could also mix and match straight DOM scripting with jQuery, like so:

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

Either way should work.

Karl Swedberg
  • 86
  • 2