Question

我有一个网站，其中有五个复选框，一个div包含另一个div，每个div包含五个隐藏的输入，其值为1或empty。该值来自DB。

这是用div代表div容器的一个例子：

<input checkbox value="a">
<input checkbox value="b">
<input checkbox value="c">
<input checkbox value="d">
<input checkbox value="e">
<div class="container">
    <div class="content" data-name="combine">
        <input type="hidden" value="" data-name="a" />
        <input type="hidden" value="" data-name="b" />
        <input type="hidden" value="" data-name="c" />
        <input type="hidden" value="" data-name="d" />
        <input type="hidden" value="" data-name="e" />
    </div>

    <div class="content" data-name="combine">
        <input type="hidden" value="1" data-name="a" />
        <input type="hidden" value="" data-name="b" />
        <input type="hidden" value="" data-name="c" />
        <input type="hidden" value="1" data-name="d" />
        <input type="hidden" value="" data-name="e" />
    </div>
</div>

在javascript代码中我有这个代码段：

if(elementLength > 0) {

    $("[data-name='combine'] div.tagsProds").each(function() {

        var element = $(this);

        $.each(enabledChecks,function(i, v) {

            if(element.find("input[name='"+v+"']").val() == "") {
                element.append("<div class='blocked'></div>");
                element.unbind("click");
                element.addClass("js_noSortable");
            }

        });

    });

}

javascript首先检查div.container是否有子节点，如果它有子节点，则代码会迭代每个子节点。在每个孩子上我迭代五个每个复选框（enabledChecks），我看看隐藏的输入是否为空。我需要的是，如果五个输入为空，则附加`div.blocked'。

Answer 1

由于我没有足够的声誉来撰写评论，我写了一个答案。

首先，如果您正在寻找使用jQuery功能的方法，我认为您的答案非常有趣，但由于我不知道这样做的任何功能，我认为您可以创建一个array()，当您检查输入是否为空值时将其推送到数组，当循环结束时，检查length的{{1}}以及它是否与然后，您的复选框号会附加array()

Answer 2

如果我正确理解了这个问题，你想找到匹配某些选择器的div，这些选择器没有带有非空值的子input元素。 .filter方法似乎很适合：

$("[data-name='"+name+"'] div.tagsProds")
    .filter(function() {
        // assert that at least one child input has a value
        var $inputsWithValue = $(this).find("input[name='avail_" + v + "'][value!='']");
        return $inputsWithValue.length === 0;
    })
    .each(function() {
        // now act on those value-less divs
        $(this)
            .append("<div class='blocked'></div>")
            .addClass("js_noSortable")
            .unbind("click");
    });

另一个仅限选择器的选项可能如下所示：

$("[data-name='"+name+"'] div.tagsProds:not(:has(input[name='avail_" + v + "'][value!='']))")
    .each(function() {
        // now act on those value-less divs
        $(this)
            .append("<div class='blocked'></div>")
            .addClass("js_noSortable")
            .unbind("click");
    });

JSFiddle：http://jsfiddle.net/nrabinowitz/vrx2wk8g/

请注意，上面的示例遵循示例代码中的选择器，但不会对您的示例代码起作用。

检查n个元素是否包含设置为true的数据属性

2 个答案: