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 元素列表，其中第一个是外部 ul ，最后一个是阅读顺序中的最后一个（我相信，我也不知道这个顺序是否得到保证，或者它是否会在下一个Jquery版本中发生变化）。

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

Answer 1

看看这个JSFiddle。

基本上，您需要Depth-first traversal（后序）。

我在选择器上玩了一下，主要用child-selector来获得下一级别的孩子，而不是所有的孩子，直到叶子，每个ul：

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

foo("div.sentence");

Answer 2

发布特定的html后，您可以执行以下操作：

$(".sentence > ul").each(function(){

    $(this).find("ul").each(function(){
       // do something with inner lists
    });

    // do something with the outer
});

或者像这样：

$(".sentence ul ul").each(function(){
    // do something with inner lists
});

$(".sentence > ul").each(function(){
    // do something with the outer
});

如果使用>需要多个级别，可以使第一个递归。

Jquery：如何修改从内到外的项目？

2 个答案: