Question

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

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

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

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

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

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

Answer 1

您必须使用自定义过滤器

var elements = $('div');

elements.each(function() {
  var element = $(this);
  var count = element.contents().filter(function() {
    return this.nodeType == Node.ELEMENT_NODE || (this.nodeType == Node.TEXT_NODE && !!$.trim(this.nodeValue))
  }).length;

  snippet.log(this.id + ': ' + count)
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
  <p>Test-1</p>
</div>
<div id="2">
  <p>Test-1</p>1
</div>
<div id="3">
  <p>Test-1</p><span>x</span>
</div>
<div id="4">
  2
  <p>Test-1</p>3
</div>

Answer 2

你可以尝试简单的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;

Answer 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++;
    }
});

Demo

Answer 4

您可以使用以下条件：

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

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

4 个答案: