Javascript 检查元素是否只有一个子元素

如果给定元素只有一个子元素（包括文本节点，但忽略空格），那么如何使用jQuery或JavaScript对其进行测试

示例：对于下面标记中的元素“div”，测试应该失败，因为它有两个子元素：p和文本节点：

<div>
    <p>Test-1</p> - subline
</div>

测试-1
-子行

示例：对于下面标记中的元素“div”，测试应该通过，因为它只有一个子元素：p（尽管忽略了空格）：

测试-1

---

似乎element.children（）无法工作，因为它忽略了文本节点。element.contents（）可以工作，但它不会忽略空格。

您可以尝试简单的js

element[0].childNodes.length

这将包括文本节点以及普通子节点

如果给定元素只有一个子元素（包括文本节点）， 但忽略空白）

排除空白

element.contents().filter(function() {
    return this.nodeType === 3 && this.nodeValue.trim().length > 0; 
}).length; //to get the number of text nodes which are not white-spaces

或者在纯js中

element[0].childNodes.filter(function() {
    return this.nodeType === 3 && this.nodeValue.trim().length > 0; 
}).length;

---

您必须使用自定义过滤器

var元素=$（'div'）；
元素。每个（函数（）{
var元素=$（此）；
var count=element.contents（）.filter（函数（））{
返回this.nodeType==Node.ELEMENT_Node | |（this.nodeType==Node.TEXT_Node&！！$.trim（this.nodeValue））
}).长度；
snippet.log（this.id+'：'+计数）
});

测试-1

测试-1
1
测试-1
x
2.
测试-1
3
非jquery版本

可以进行优化，但这是可行的
value.nodeType===1
检查它是否是元素，然后增加计数器

var count = 0;
Array.prototype.slice.call(document.getElementById('parent_id_here').childNodes, 0).forEach(function (value) {
    if (value.nodeType === 1) {
        count++;
    }
});

您可以使用以下条件：

$('div').html().trim() == $('div > *:first-child')[0].outerHTML.trim()

不会排除空白spaces@ArunPJohny做了更改，但你已经做了，我想有没有办法重构并缩小它。@尼克，这有什么关系？如果您需要重复使用它，请将其提取到函数中。@Rorymcrossan它可以工作，但最好使用简洁的方法。我尝试重构它：element.contents（）.filter（“：only child”）.length。如果没有比阿伦的答案更好或更短的方法，那么我很乐意接受它。
$('div').html().trim() == $('div > *:first-child')[0].outerHTML.trim()