target only some of divs content

Question

I have the below html markup

<div class="title-wrap">
      <span class="title">Hello World</span>
        <br/>
   This title is about Hello World
</div>

and I want to target the text 'This title is about Hello World'

But I can't work out how to do this with out also including the span? Is it possible to achieve this with the html in this format?

I have tried using

var test = (jQuery('.title-wrap').text() || '' );
alert (test);

but this returns

Hello World

This title is about Hello World

as shown in this fiddle.

So what exactly you want to retrieve? The last line in the `text()` or what? — zerkms, Oct 18 '12 at 03:49

score 3 · Accepted Answer · answered Oct 18 '12 at 03:53

3

You can use this:

var test = (jQuery('.title-wrap')
        .clone()    //clone the element
        .children() //select all the children
        .remove()   //remove all the children
        .end()  //again go back to selected element
        .text() || '' );
alert (test);

Output:

This title is about Hello World

Fiddle: http://jsfiddle.net/Y6dcU/6/

answered Oct 18 '12 at 03:53

Praveen Kumar Purushothaman

164,888
24
203
252

1

But this will only work if what you want to select is the only non-child portion of the element. – Hailwood Oct 18 '12 at 03:55
@Hailwood Yeah, and that is what the OP needs... :) I just answered the requirement. – Praveen Kumar Purushothaman Oct 18 '12 at 03:56
In this example yeah, but for future readers I thought it might be useful to make it clear ;) – Hailwood Oct 18 '12 at 03:57
@Hailwood I guess I have explained what should be done in the comments. Anyways, what do you suggest to make it better? – Praveen Kumar Purushothaman Oct 18 '12 at 03:58
1

In terms of the answer, nothing :), not much you could do really and is exactly how I would have done it, this is more a structural problem of the OP's html :) – Hailwood Oct 18 '12 at 04:04
2

This works well thanks, unfortunately I can't control the html here as I would not have structured it like this. thanks. – ak85 Oct 18 '12 at 04:05
Actually I lie, http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery#4399718 – Hailwood Oct 18 '12 at 04:07

score 3 · Answer 2 · answered Oct 18 '12 at 04:05

3

You can use .contents() to get all the child nodes of .title-wrap then use .last() to select the last one since that's the one you want.

jQuery('.title-wrap').contents().last().text()

http://jsfiddle.net/Y6dcU/11/

answered Oct 18 '12 at 04:05

Musa

96,336
17
118
137

score -2 · Answer 3 · edited Oct 18 '12 at 04:05

Try wrapping it in a span element. You can use a header(h1, h2, etc) to substitute the first span, or you can use an id or class attribute to get a specific reference:

<div class="title-wrap">
    <span class="title">Hello World</span>
    <br>
    <span id="myTitle">This title is about Hello World<span>
</div>

In JS you would use:

var test = (jQuery('#myTitle').text() || '' );
alert (test);

target only some of divs content

3 Answers3

You can use this:

Output:

Fiddle: http://jsfiddle.net/Y6dcU/6/