jQuery - 使用 has() 检查附加的 div 是否存在
jQuery - Checking existence of appended div with has()
我正在尝试分离附加到另一个的 div。我正在使用 has() 方法来检查 div 是否存在于另一个内部。在第一个条件(如果)中,代码正在做它需要做的事情。但是在第二个(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:
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);
}
});
由于 jQuery 的 .has()
returns 是一个 jQuery 对象,您的 if 条件将始终为真(因为对象是 javascript).因此在您的条件中调用 .length()
属性:
if($("#main").has("#colors_container").length > 0)
除了 .has(),你还可以使用 use .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);
}
});
我正在尝试分离附加到另一个的 div。我正在使用 has() 方法来检查 div 是否存在于另一个内部。在第一个条件(如果)中,代码正在做它需要做的事情。但是在第二个(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:
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);
}
});
由于 jQuery 的 .has()
returns 是一个 jQuery 对象,您的 if 条件将始终为真(因为对象是 javascript).因此在您的条件中调用 .length()
属性:
if($("#main").has("#colors_container").length > 0)
除了 .has(),你还可以使用 use .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);
}
});