在条件中检查子项的属性

Question

I am trying to see if the <ul id="sortable"> has less than 3 <li> children and each child does contain the qual="qualX" (where 'X' is an integer and 'qual' is an attribute).

There is a 3x2 grid <div id="qualities"> that when a <div class="quality"> is clicked, it will add a <li> to <ul id="sortable"> . The adding part works, but I want to make it so you can't add the same <li> more than once and not have more than 3 <li> total. Right now, only the 3 <li> restricter is working; the "don't add the samea thing twice" code is not, as it's always true right now (apparently).

My logic code is

$(".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>");
    }
});

whereas the HTML that is using this is

<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

This selects children that have the matching qual attribute using the attribute selector.

---

You should probably use data-qual over qual .