javascript - Jquery:如何将项目从内部修改为外部？

Question

我有这样的标记:

<div class="sentence">
    <ul title="list 3">
        <li>
            <ul title="list 1">
                <li> A </li>
                <li> B </li>
            </ul>
        </li>
        <li>
            <ul title="list 2">
                <li> 1 </li>
                <li> 2 </li>
            </ul>
        </li>
    </ul>
    <ul title="list n">
             .....
    </ul>
</div>

我有一个函数可以对列表中的元素进行一些更改。这个函数相当大，所以为了说明这个问题，它可以简化成这样:

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

如您所见，此函数没有任何意义。这只是为了展示一些例子的例子。可能这行不通。

问题是只有当我只有一个列表 (ul) 时函数才有效。当我有多个列表时，它不起作用，因为 $("div.sentence ul") 返回 ul 元素列表，其中第一个元素是外部 < em>ul 最后一个是阅读顺序的最后一个(我相信，我也不知道这个顺序是否有保证，或者它是否会在下一个 Jquery 版本中改变)。

问题是我需要首先获取内部列表(不是顺序问题)，然后是外部列表。例如，在这个例子中，我需要得到标题为“list 1”的列表，然后是“list 2”，最后一个应该是“list 3”。是否有可能按此顺序获得 *ul*s？

Answer 1

看看这个JSFiddle .

基本上，您需要一个 Depth-first traversal (后序)。

我玩了一下选择器，主要是 child-selector只得到下一级的 child ，直到叶子，这对每个 ul 都是这样的:

function foo(ctx) {
  $(ctx).find(">ul").each(function() {
      foo($(">li", this));
      alert($(this).attr('title'));
  });
}

foo("div.sentence");​