Returning Text Nodes

Question

I'm using this line of code:

$("#middle_child").contents().filter(function(){return this.nodeType == Node.TEXT_NODE;}).text();

For now, I'm just placing this in a console.log(). I'm using Chrome for testing & value returns as an empty string, but the value should return "Middle Child".

This is the HTML:

<div id='parent'>
  Parent
  <div id='oldest_child'>
    Oldest Child
    <div id='middle_child'>
      Middle Child
        <div id='youngest_child'>
          Youngest Child
        </div>
    </div>
  </div>
</div>

<div id='lone'>Lonely Div</div>

EDIT: I tried making a jsfiddle & that did provide me with some potential insight. In the fiddle I selected jQuery 1.6.4 & it worked just fine. The version of jQuery I'm running on my site is 1.6.2. Does anyone know if that could be part (if not all) of my issue?

Answer 1

I figured out my issue.

First off, I lied, I'm using jQuery Version 1.9.1 for some reason it shows up as 1.6.2 in the link, but the file is 1.9.1.

Now, my issue: I forgot to wrap my script inside of a $(document).ready().

Answer 2

Have you tried storing the .text value into a variable and logging it? Not sure where your issue is coming in. Have a look at this JSFiddle, it uses the same code you posted. Clicking the button will replace the text inside #lone with the text from #middle_child.

http://jsfiddle.net/m5xPd/

 var data = $("#middle_child").contents().filter(function () {
    return this.nodeType == Node.TEXT_NODE;
 }).text();

 $('#button').click(function(){
     $('#lone').empty().append(data);
 });