Question

我正在尝试将附加到另一个div的div分离。我正在使用has（）方法来检查div是否存在于另一个内部。在第一个条件（if）中，代码正在执行它需要完成的任务。但是在第二个（否则如果）中，我在第一个步骤中执行相同的步骤，根本不起作用。我不确定我是否正确使用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);
    }
});

jQuery - 用has（）检查附加div的存在

1 个答案: