Jquery: How to modify items from inner to outer?
<p>I have a markup like this:</p>

<pre><code>&lt;div class="sentence"&gt;
    &lt;ul title="list 3"&gt;
        &lt;li&gt;
            &lt;ul title="list 1"&gt;
                &lt;li&gt; A &lt;/li&gt;
                &lt;li&gt; B &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;ul title="list 2"&gt;
                &lt;li&gt; 1 &lt;/li&gt;
                &lt;li&gt; 2 &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul title="list n"&gt;
             .....
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>I have a function that makes some changes into the elements inside the list. This function is quite large, so to illustrate the problem it could simplify to something like this:</p>

<pre><code>$("div.sentence ul").each(function() {
    var mid = $(this).children("li").map(function() {
        return $(this).text();
    }).get().join(',');
    $(this).replaceWith(mid);
});
</code></pre>

<p><em>As you can see, this function has no sense. That's just an example in order to show some example. Probably, that doesn't work.</em></p>

<p>The problem is that function works only when I have only a list (<em>ul</em>). When I have more than one list it doesn't work because <code>$("div.sentence ul")</code> returns a list of <em>ul</em> elements where the first one is the outer <em>ul</em> and the last one is the last one in reading order (I believe, also I don't know if this order is guaranted or if it will change in the next Jquery version).</p>

<p>The question is I need to get first the inner lists (not a problem the order) and then the outer ones. For instance, in this example, I need to get the list tittled "list 1", then "list 2" and the last one should be "list 3". Is possible to get the *ul*s in this order?</p>
