jQuery - has（）で追加されたdivの存在を確認する

Question

別のdivに追加されたdivを切り離そうとしています。私はdivが他の内部に存在するかどうかを確認するためにhas（）メソッドを使用しています。最初の条件（if）では、コードは実行する必要があることを実行しています。しかし、私が最初のものと同じステップを行った2番目のもの（else 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：jQueryの.has()返すので

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オブジェクト、あなたの場合の条件は常に常にを（オブジェクトはjavascriptの真実の値なので）真実です。したがって、あなたの条件内.length()プロパティを呼び出す：

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

代わりの.has（）、あなたはまた、使用.children()

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