javascript检查子元素

时间:2015-06-07 02:23:02

标签: javascript jquery html

只需使用id对我的div中的孩子进行简单的检查。但无论它是否为空,它总是返回true。怎么回事?



<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<h1 id="number"></h1>
<div id="bigbox">
   <p>Follow us:</p>
   <div id="box">
     <!-- javascript is lying about this div -->    
   </div>
   
</div>
<input id="input" type="button" value="click" />



<script>
$("#input").click(function(){
    var ele = document.getElementById('box');
    if (ele.hasChildNodes()) {
        alert("has");
        alert(ele.hasChildNodes());
    }
    else{
        alert("not");
        alert(ele.hasChildNodes());
    }
}); 
</script>
</html>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:3)

试试这个

if ( $('#box').children().length > 0 ) {
     // this div has child and do something
}

答案 1 :(得分:2)

实际上我认为一切都很完美,但你的div框中有空格,所以删除空格并尝试,将解决你的问题。

如果指定的节点有任何子节点,则hasChildNodes()方法返回true,否则返回false。

  

注意:节点内的空格被视为文本节点,所以如果你   在元素,该元素内留下任何空格或换行符   还有子节点。

<div id="box"></div> <!-- No space here between start and end -->

检查此 DEMO

答案 2 :(得分:1)

空格和换行符是文本节点,因此它有子节点。如果您不想使用jQuery,只需使用:

ele = document.getElementById('box');
if (ele.children.length > 0)) {
    alert("has");
    alert(ele.hasChildNodes());
}
else{
    alert("not");
    alert(ele.hasChildNodes());
}