jQuery - 使用 has() 检查附加 div 的存在

Question

我正在尝试分离附加到另一个的 div。我正在使用 has() 方法来检查 div 是否存在于另一个中。在第一个条件（如果）中，代码正在做它需要做的事情。但是在第二个（否则）中，我做了与第一个相同的步骤，根本不起作用。我不确定是我没有正确使用 has() 方法，还是问题出在其他地方，但没有按照应有的方式检查条件。

提前感谢您提供任何进一步的帮助。

我也粘贴了 CSS 代码，只是为了便于测试。这是我所拥有的：

HTML：

<div id="main">
    <div id="colors" class="divs">
        <span>COLORS</span>
    </div>
    <div id="numbers" class="divs">
        <span>NUMBERS</span>
    </div>
</div>

<div id="return">
    <span id="text_return">Return</span>
</div>

<div id="colors_container" class="divs">
    <span>Colors container</span>
</div>

<div id="blue" class="divs">
    <span>Blue - Description</span>
</div>

CSS：

#main
{
    background-color: #840002;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#colors
{
    background-color: green;
}

#numbers
{
    background-color: red;
}

#return
{
    background-color: orange;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}

#colors_container
{
    background-color: purple;
}

#blue
{
    background-color: blue;
}

.divs
{
    height: 200px;
    width: 200px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

jQuery:

var numbers;
var colorsContainer = $("#colors_container").detach();
var blue = $("#blue").detach();
$("#text_return").html("");

//Click - #colors
$("#colors").on("click", function()
{
    numbers = $("#numbers").detach();
    $("#main").append(colorsContainer);
    $("#text_return").html("Return");
});

//Click - #colors_container
$("#main").on("click", "#colors_container", function()
{
    colorsContainer = $("#colors_container").detach();
    $("#main").append(blue);
});

//Click - #return
$("#return").click(function()
{
    if($("#main").has("#colors_container")) //WORKS FINE
    {
        colorsContainer = $("#colors_container").detach();
        $("#main").append(numbers);
        $("#text_return").html("");
    }
    else if($("#main").has("#blue")) //NOT WORKING - Not detaching "#blue" div
    {
        blue = $("#blue").detach();
        $("#main").append(colorsContainer);
    }
});

Answer 1

由于 jQuery 的 .has() 返回一个 jQuery 对象，您的 if 条件将始终为真（因为对象是 javascript 中的真值）。因此，在您的条件中调用 .length() 属性：

if($("#main").has("#colors_container").length > 0)

你也可以使用.children()代替.has()

$("#return").click(function()
{
    if($("#main").children("#colors_container").length > 0) 
    {
        colorsContainer = $("#colors_container").detach();
        $("#main").append(numbers);
        $("#text_return").html("");
    }
    else if($("#main").children("#blue").length > 0) 
    {
        blue = $("#blue").detach();
        $("#main").append(colorsContainer);
    }
});