Jquery为层次结构中的所有父级添加一个类

Question

我有一个父/子层次结构，子项具有动态长度。 这意味着子节点可以是另一个节点的父节点等。

这是我的HTML：

<ul class="tree">
<li id="8587509197182534205xy9w" class="has-children showChildren">
    <i class="fi-minus"></i>

    <div class="checkboxFive">
        <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509197182534205xy9w" value="8587509197182534205xy9w">
        <label for="t_8587509197182534205xy9w"></label>
    </div>

    <span class="text">Sand</span>

    <ul class="child">
        <li id="8587509198220874655a1s8" class="has-children showChildren">
            <i class="fi-minus"></i>


            <div class="checkboxFive">
                <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198220874655a1s8" value="8587509198220874655a1s8">
                <label for="t_8587509198220874655a1s8"></label>
            </div>

            <span class="text">Fyllgrus</span>
            <ul class="child">
                <li id="8587496924061602638qkdo">
                    <div class="checkboxFive">
                        <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587496924061602638qkdo" value="8587496924061602638qkdo">
                        <label for="t_8587496924061602638qkdo"></label>
                    </div>

                    <span class="text">sub sub</span>
                </li>
            </ul>

        </li>
        <li id="8587509198127281697em9f">
            <div class="checkboxFive">
                <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509198127281697em9f" value="8587509198127281697em9f">
                <label for="t_8587509198127281697em9f"></label>
            </div>

            <span class="text">Siltholdig</span>
        </li>
    </ul>
</li>

<li id="8587509197183114344b5l4" class="has-children">
    <i class="fi-plus"></i>
    <div class="checkboxFive">
        <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_8587509197183114344b5l4" value="8587509197183114344b5l4">
        <label for="t_8587509197183114344b5l4"></label>
    </div>

    <span class="text">Leire</span>
    <ul class="child">
        <li id="85875091985832885997g4j">
            <div class="checkboxFive">
                <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_85875091985832885997g4j" value="85875091985832885997g4j">
                <label for="t_85875091985832885997g4j"></label>
            </div>

            <span class="text">Bløt</span>
        </li>
        <li id="858750919842507621898j6">
            <div class="checkboxFive">
                <input type="checkbox" name="massTypeId" class="massTypeTreeId" id="t_858750919842507621898j6" value="858750919842507621898j6">
                <label for="t_858750919842507621898j6"></label>
            </div>

            <span class="text">Tørr</span>
        </li>
    </ul>
</li>

我想要实现的是，无论何时选择子节点，它都会一直运行到根节点并选择层次结构中的所有父节点。 像这样的东西：

因此，当我在图像中选择子子时，父母也被选中。 我有一个类设计父检查复选框。 我想用类'checkboxFive'将该类添加到所有父div。 在jquery中有一个简单的方法可以做到这一点，或者我将不得不使用递归添加它？

Answer 1

虽然其他人已经提到过JQuery.parents() ，但值得注意的是， parents()可以将选择器作为参数。 据我所知，您希望将一些特殊类（我将在本答案中称为parentCheckbox ）应用于带有checkboxFive类的任何父复选框。 你可以这样做：

$(<JQuery selector for whatever you want to set this for>).change(function() {
  $(this).parents(".checkboxFive").addClass("parentCheckbox");
});

您需要做的就是找出a）您想要将onchange函数应用于：

$("input[type=checkbox]")

要么

$(".tree input[type=checkbox"]")

如果你想确保它只应用于类tree的ul的复选框。

您还可以更具体地了解parents()选择器并执行类似parents(".tree .checkboxFive").addClass...以确保树外的任何内容都不会被检查。

Answer 2

为您创建了一个示例。 您可以轻松理解这一点，并根据您的情况实施相同的操作。 这将使每个<div>内的所有文本的颜色<div>红色。

<div>
    GrandParent
    <div>
       Parent
       <div id="test">
           Child
       </div>
    </div>
</div>
<script>
    jQuery("#test").parents("div").css("color" , "red");
</script>