如果所有孩子都分配了班级，则选择父节点答案

【问题标题】：select parent node if all children have assigned class如果所有孩子都分配了班级，则选择父节点
【发布时间】：2013-07-10 19:35:39
【问题描述】：

我正在寻找一种有效的方法来遍历包含多个级别的无序列表，其中包含 .selected 类。如果一个组中的所有 UL LI 都有 class .selected，我需要添加 class .selected 子 UL 的父 LI。

<ul>
    <li>one <-- this li adds class .selected if ALL its children have .selected
        <ul>
            <li class="selected">red</li>
            <li class="selected">green</li>
            <li class="selected">blue</li>
        </ul>
    </li>
    <li>two
        <ul>
            <li class="selected">red</li>
            <li>green</li>
            <li class="selected">blue</li>
        </ul>
    </li>
    <li>three</li>
</ul>

如果任何给定 UL 中的所有子代都具有类 .selected，则将类 .selected 添加到父 LI，因此在这种情况下，包含文本“one”的 LI 将是唯一具有类 .selected 的父 LI已添加。

我需要在页面加载时发生这种情况。我已经尝试了很多方法，但这个最接近，但我不太确定它是否最有效：

$("ul li").filter(function () {
    var lis_total = $(this).siblings().length + 1;
    var lis_selected = $(".selected", this).siblings().length + 1;
    if(lis_total == lis_selected)
        return $(this).parent("li").addClass("selected");
});

我不太确定我是否做得正确。它不工作。

【问题讨论】：

标签： jquery

【解决方案1】：

如果您想要单线，请尝试http://jsfiddle.net/4JNaL/

$('li ul:not(:has(li:not(.selected)))').parent().addClass('selected');

或

var theParent = $('li ul:not(:has(li:not(.selected)))').parent();

返回元素进行操作

对于任意深度的树：http://jsfiddle.net/GQbmU/4/

do {
    $results = $('li:not(.selected) > ul:not(:has(li:not(.selected)))');
    $results.parent().addClass('selected');
} while ( $results.length > 0);

或者，因为这个答案的主题是单行：http://jsfiddle.net/GQbmU/6/

while ( $('li:not(.selected) > ul:not(:has(li:not(.selected)))').parent().addClass('selected').length > 0) {} ;

【讨论】：

我喜欢这个解决方案，现在我怎样才能一直遍历树直到找到根。在我的情况下，无序列表可能很大，我想选择父节点中的第一个 li，直到找到根节点。

【解决方案2】：

这样的？

$("ul li").filter(function () {
    var all = $(this).find('> ul > li'); //get all immediate ul and its immediate li's
    var selected = $(this).find('> ul > li.selected'); //get all immediate ul and its immediate li's with class selected

   return all.length && all.length == selected.length; //return if there are li's and all are selected
}).addClass('selected'); //add class

Demo

【讨论】：

我唯一的问题是，这没有足够的遍历树，我将如何继续直到我找到根？
如果有序列表的深度为 10 级，我只想将 .select 类添加到每个父 ul li 的第一个 li 中，直到找到根目录。我尝试了 PrevAll() 但它选择了 .select 类之前的所有内容。
您只想在每个 li 的第一个 li 中查找？很抱歉，我可能还是没听懂。

【解决方案3】：

$(function () {
    $("ul").filter(function () {
        var lis_total = $(this).children("li").length + 1;
        var lis_selected = $(this).children("li.selected").length + 1;
        if (lis_total == lis_selected) {
            $(this).parent("li").addClass("selected");
        }
    });
});

【讨论】：

呃.. 只晚了 11 分钟。 :)

【解决方案4】：

http://jsbin.com/ecixez/2/edit

$('li>ul:has(.selected)').each(function(){
  if($('.selected', this).length === $('li',this).length) // if 3 == 3 :)
    $(this).parent().addClass('selected');
});

【讨论】：