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

Question

我有一个 div 结构，如下面的代码所示。可能有多个父 divs，其 ID 为 p0、p1、p2 等。我试图在 div 的正下方找到子 divs，其 ID 以 [=15] 开头=].我需要从非空子 divs.

中分别找到空子 divs

当我运行下面的代码时，方法getEmptyDivsreturn0个元素，而方法getNonEmptyDivsreturns 12个元素包括所有子空和非空 divs.

这个问题的演示如下URL：demo code sample

示例代码 return 元素数量不正确

<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>

我试过上面的代码，但是 return 元素数量不正确。

问题 : 我可以使用什么选择器来获取所有空 div 元素的列表，这些元素直接位于 div 之下，其 id 以 p，还有用于获取类似非空 divs?

的选择器

Answer 1

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

$("#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>

Answer 2

您可以使用 :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/

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

jquery selector for finding div with empty inner html directly inside a parent div

html

jquery

jquery-selectors