用于直接在父 div 内查找具有空内部 html 的 div 的 jquery 选择器答案

【问题标题】：jquery selector for finding div with empty inner html directly inside a parent div用于直接在父 div 内查找具有空内部 html 的 div 的 jquery 选择器
【发布时间】：2015-12-27 04:30:48
【问题描述】：

我有一个 div 结构，如下面的代码所示。可能有多个父 div 的 id 为 p0、p1、p2 等。我试图直接在一个 id 以p 开头的 div 下找到子 div。我需要将空子 div 与非空子 div 分开查找。

当我运行下面的代码时，getEmptyDivs 方法返回 0 个元素，而 getNonEmptyDivs 方法返回 12 个元素，其中包括所有子空以及非空 div。

此问题的演示位于以下 URL：demo code sample

不返回正确数量元素的示例代码

<div id='p0'>
     <div>some content</div>
     <div></div>
     <div>some content</div>
     <div></div>
     <div>some content</div>
     <div>some content</div>
    </div>
    <div id='p1'>
     <div>some content</div>
     <div></div>
     <div>some content</div>
     <div></div>
     <div>some content</div>
     <div>some content</div>
</div>
<button type="button" onclick="var x =  getEmptyDivs(); alert(x.length);">Get Empty Divs</button>
<button type="button" onclick="var x =  getNonEmptyDivs(); alert(x.length);">Get Non-Empty Divs</button>
<script>
function getEmptyDivs() { 
   return $("div[id^='p'] > div[innerHTML='']");
}
function getNonEmptyDivs() { 
   return $("div[id^='p'] > div[innerHTML!='']");
}
</script>

我已经尝试了上面的代码，但它返回的元素数量不正确。

问题：我可以使用什么选择器来获取 id 以 p 开头的 div 下的所有空 div 元素的列表，以及用于获取类似非空 div 的选择器?

【问题讨论】：

标签： jquery html jquery-selectors

【解决方案1】：

您可以使用:empty 和:not(:empty) 选择器：

function getEmptyDivs() {
    return $("div[id^='p'] > div:empty");
}

function getNonEmptyDivs() {
    return $("div[id^='p'] > div:not(:empty)");
}

Example fiddle

http://api.jquery.com/empty-selector/

http://api.jquery.com/not-selector/

【讨论】：

这是现成的代码，无需任何修改即可工作。伟大的。谢谢。
所以:empty 的意思是innerHTML is empty?
不仅仅是innerHTML。来自文档：Select all elements that have no children (including text nodes).
好的。得到它。谢谢。 jquery 太强大了。
我认为是因为innerHtml 不是属性。

【解决方案2】：

您可以使用子选择器并过滤掉空的东西：

$("#p0 > div").filter(function () {
  return $(this).is(":empty");
});

片段

function getEmptyDivs() { 
  return $("div[id^='p'] > div:empty");
}
function getNonEmptyDivs() { 
  return $("div[id^='p'] > div:not(:empty)");
}

<div id='p0'>
  <div>some content</div>
  <div></div>
  <div>some content</div>
  <div></div>
  <div>some content</div>
  <div>some content</div>
</div>
<div id='p1'>
  <div>some content</div>
  <div></div>
  <div>some content</div>
  <div></div>
  <div>some content</div>
  <div>some content</div>
</div>
<button type="button" onclick="var x =  getEmptyDivs(); alert(x.length);">Get Empty Divs</button>
<button type="button" onclick="var x =  getNonEmptyDivs(); alert(x.length);">Get Non-Empty Divs</button>

【讨论】：