How to not select a span inside a class

Question

I have this HTML:

<div class="one">32<span class="one_span"> Years old</span></div>

I want to be able to select the class one text without the span's text. Is that possible? Here's what I've tried, but it didn't work

 var age = $('.one:not(.one_span)').text();

score 4 · Answer 1 · answered Jun 04 '14 at 18:16

4

Use contents():

var age = $('.one').contents()[0]

Here's a fiddle to demonstrate.

contents(): Get the children of each element in the set of matched elements, including text and comment nodes.

answered Jun 04 '14 at 18:16

RichieHindle

272,464
47
358
399

Doent's work if there's an element within the number "
32 Years old
" – circusdei Jun 04 '14 at 18:20
1

@circusdei: Er, no, you're right. It also doesn't work if the computer is switched off, or made out of chocolate. – RichieHindle Jun 04 '14 at 18:21
you really think that data is going to be validated at all? – circusdei Jun 04 '14 at 18:22
@circusdei: Who knows? It's fairly likely that the OP is generating the HTML in the first place. – RichieHindle Jun 04 '14 at 18:23
'tis true, but in that case it would make more sense to add the semantic markup around the number, and select it that way – circusdei Jun 04 '14 at 18:24

score 1 · Accepted Answer · answered Jun 04 '14 at 18:14

1

You can you parseInt, JSFiddle: http://jsfiddle.net/4qT4u/

answered Jun 04 '14 at 18:14

pavel

26,538
10
45
61

This is actually a great and simple solution. Thank you. – user3541436 Jun 04 '14 at 18:23

score 1 · Answer 3 · answered Jun 04 '14 at 18:15

var text = $(".one")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text()

Removes all child elments, and sets text to the remaining content.

Working fiddle: http://jsfiddle.net/G9SfB/ Source: http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/

score 1 · Answer 4 · answered Jun 04 '14 at 18:15

1

To be safe, clone the div, remove the span from the clone,and get the text from that:

var cl = $('div.one').clone();
cl.find('span').remove();
var age = cl.text();

answered Jun 04 '14 at 18:15

Paul Roub

36,322
27
84
93

score 0 · Answer 5 · edited May 23 '17 at 12:27

0

Found here: https://stackoverflow.com/a/11348383/1524085

var text = $('div').contents(':not(.one_span)').text();

http://jsfiddle.net/6pRS3/

edited May 23 '17 at 12:27

Community

1
1

answered Jun 04 '14 at 18:17

Pedro Estrada

2,384
2
16
24

How to not select a span inside a class

5 Answers5