Question

我正在尝试查看<ul id="sortable">是否有少于3个<li>个孩子而且每个孩子不包含qual="qualX"（其中'X'是一个整数，'qual'是一个属性）。

有一个3x2网格<div id="qualities">，当点击<div class="quality">时，它会向<li>添加<ul id="sortable">。添加部分可以使用，但我想这样做，因此您不能多次添加相同的<li>，并且总共不会超过3 <li>。现在，只有3 <li>限制器正在工作; “不要两次添加相同的东西”代码不是，因为它现在总是如此（显然）。

我的逻辑代码是

$(".quality").click(function() {
    if($("#sortable").children().length < 3 && $("#sortable").children("li").each().attr("qual") !== $(this).attr("qual")) {
        $("#sortable").append("<li qual=" + $(this).attr("qual") + ">" + $(this).text() + "</li>");
    }
});

而使用它的HTML是

<ul>
    <li style="display:inline-block;">
        <div id="qualities">
            <div style="width:600px;overflow:hidden;background:blue;">
                <div class="quality" qual="qual1" style="width:200px;float:left;">
                    Quality 1
                </div>
                <div class="quality" qual="qual2" style="width:200px;float:left;">
                    Quality 2
                </div>
                <div class="quality" qual="qual3" style="width:200px;float:left;">
                    Quality 3
                </div>
                <div class="quality" qual="qual4" style="width:200px;float:left;">
                    Quality 4
                </div>
                <div class="quality" qual="qual5" style="width:200px;float:left;">
                    Quality 5
                </div>
                <div class="quality" qual="qual6" style="width:200px;float:left;">
                    Quality 6
                </div>
            </div>
        </div>
    </li>
    <li style="display:inline-block;">
        <div id="priority">
            <ul id="sortable">
                <!--<li>Item 1</li>-->
            </ul>
        </div>
    </li>
</ul>


<div id="priority">
    <ul id="sortable">
        <!--<li>Quality 1</li>-->
    </ul>
</div>

Answer 1

... && !$("#sortable").children("[qual=" + $(this).attr('qual') + "]").length

这将使用属性选择器选择具有匹配qual属性的子项。

您应该使用data-qual而不是qual。

在条件中检查子项的属性

1 个答案: