Get text nodes with their parent elements sequentially (harder than it seems)

[bigxbox]

Consider the following markup:\[code\]<div>Hello, my <span>name</span> is John</div>\[/code\]I need to get the text nodes and the elements containing them, sequentially, as in:1: \[code\]"Hello, my "\[/code\], \[code\]<div>\[/code\] (HTMLElement)2: \[code\]"name"\[/code\], \[code\]<span>\[/code\] (HTMLElement)3: \[code\]" is John"\[/code\], \[code\]<div>\[/code\] (HTMLElement)This needs to be done in a way that allows me to get CSS style of HTMLElements later. What I already tried:\[code\]$(foo).find('*').contents().filter(function() { var $this = $(this); return this.nodeType === 3 && $.trim($this.text()).length > 0; });\[/code\]This results in a non-sequential result set, as in:1: \[code\]"Hello, my "\[/code\]2: \[code\]" is John"\[/code\]3: \[code\]"name"\[/code\]However, I can access their parent elements, so this does half of the job.The main question, therefore, is: how do I get text nodes in the same sequence they are in the document?