0

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

有一个 3x2 网格<div id="qualities">，当单击 a 时<div class="quality">，它会将 a 添加<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>
4

1 回答 1

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

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

您可能应该使用data-qualover qual。

于 2013-03-16T20:08:29.483 回答