Question

所以我试图弄清楚为什么我认为工作的东西不是基于jQuery's API。

简要问题概述：

我有一个群组和用户列表。群体可能会重叠用户列表，因此我想同步每个用户在他们可能出现的任意数量的组中的复选框。

我正在浏览的相关HTML：

<div class="dest" ondragover="allowDrop(event)">
    <ul class="list-unstyled" data-role="role1">
        <li data-id="2">
            <div class="checkbox">
                <label>
                    <input name="role1" type="checkbox" value="1;2" checked="checked"> GroupName
                </label>
            </div>
            <ul>
                <li>
                    <div class="checkbox">
                        <label>
                            <input name="role1Inclusions" type="checkbox" value="3;2;1" checked="checked">Person1
                        </label>
                    </div>
                </li>
                <li>
                    <div class="checkbox">
                        <label>
                            <input name="role1Inclusions" type="checkbox" value="3;2;2" checked="checked">Person2
                        </label>
                    </div>
                </li>
                <li>
                    <div class="checkbox">
                        <label>
                            <input name="role1Inclusions" type="checkbox" value="3;2;3" checked="checked"> Person3
                        </label>
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input name="role1" type="checkbox" value="2;4" checked="checked"> Person4
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input name="role1" type="checkbox" value="2;1" checked="checked"> Person1
                </label>
            </div>
        </li>
    </ul>
</div>

解释复选框值的结构：

第一个数字标识了我正在查看的内容1 = Group, 2 = Person, 3 = PersonInclusion。对于团体和人员，第二个 number分别是GroupId / PersonId。对于PersonInclusions，它是各自的GroupId，第三个数字是PersonId。

非工作JavaScript（JSFiddle）：

$('.dest').on('change', 'input[type="checkbox"][value^="2;"], input[type="checkbox"][value^="3;"]', function () {
    $('ul[data-role="' + $(this).parentsUntil('.dest').data('role') + '"] input[type="checkbox"][value$=";' + $(this).val().split(";").slice(-1)[0] + '"]:not([value^="1"])').prop('checked', $(this).prop('checked'));
});

使用JavaScript（JSFiddle）：

$('.dest').on('change', 'input[type="checkbox"][value^="2;"], input[type="checkbox"][value^="3;"]', function () {
    $('ul[data-role="' + $(this).closest('.dest').children('ul').data('role') + '"] input[type="checkbox"][value$=";' + $(this).val().split(";").slice(-1)[0] + '"]:not([value^="1;"])').prop('checked', $(this).prop('checked'));
});

如果您在功能中检查$(this).parentsUntil('.dest').data('role')，则会看到其类型为undefined。我发现这很奇怪，因为手动验证在data-role的仅子元素上定义.dest非常容易。

有什么想法吗？

谢谢！

Answer 1

想出来。我错过了API返回元素的祖先 s 。我只想要定义数据角色的地方。修复了以下不可用的javascript：

database

JSFiddle

Answer 2

.parentsUntil()返回元素集合。集合中的第一个元素是调用该方法的元素的父元素。最后一个元素是与停止规则匹配的子元素。

data(key)从集合中的第一个元素检索数据。你想要的是最后一个。因此，请在.eq(-1)

之后添加.parentsUntil()

来自parentUntil的意外结果

2 个答案: