Question

如何检查div类中的div类是否存在？

以下示例;我想检查＆＃34; showOnload＆＃34; div类存在于里面;父div类＆＃34; hideUnhidePanel＆＃34;？

<div id="lodaDiv" hidden="true"  class="hideUnhidePanel">
  <div class="showOnload">
  </div>
  <div class="showOnload">
  </div>
  <div class="showOnload">
  </div>
</div>

<div id="load2Div" hidden="true"  class="hideUnhidePanel">
//Nothing exist
</div>

JQuery代码：

$('.hideUnhidePanel').each(function() {
alert('yo');
if($(this).children('showOnload'))
alert('child exist');
});

小提琴：https://jsfiddle.net/5h49x7qe/

更新：
注 - ＆gt;在小提琴中，它显示警觉三次;但实际上它应该只显示两次;作为第三个showHidePanel没有＆＃34; showOnload＆＃34;类。

Answer 1

.children（）将始终返回一个jQuery对象，无论一个是否存在，所以总是会真实的。您可以检查jQuery对象的长度，以查看元素是否存在于jQuery对象中。

此外，您在.

中的showOnload之前缺少班级选择器children('showOnload')

$('.hideUnhidePanel').each(function() {
  snippet.log('yo: ' + this.id);
  if ($(this).children('.showOnload').length) {
    snippet.log('child exist');
  }

});

<!-- 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/1.11.1/jquery.min.js"></script>
<div id="lodaDiv1" hidden="true" class="hideUnhidePanel">
  <div class="showOnload"></div>
  <div class="showOnload"></div>
  <div class="showOnload"></div>
</div>
<div id="lodaDiv2" hidden="true" class="hideUnhidePanel">
  <div class="showOnload"></div>
  <div class="showOnload"></div>
  <div class="showOnload"></div>
</div>
<div id="lodaDiv3" hidden="true" class="hideUnhidePanel"></div>

但是，如果您只想使用hideUnhidePanel迭代showOnload，那么您可以使用.has（）/：has（）

$('.hideUnhidePanel').has('.showOnload').each(function() {
  //or $('.hideUnhidePanel:has(.showOnload)').each(function() {
  snippet.log('child exist: ' + this.id);
});

<!-- 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/1.11.1/jquery.min.js"></script>

<div id="lodaDiv1" hidden="true" class="hideUnhidePanel">
  <div class="showOnload"></div>
  <div class="showOnload"></div>
  <div class="showOnload"></div>
</div>
<div id="lodaDiv2" hidden="true" class="hideUnhidePanel">
  <div class="showOnload"></div>
  <div class="showOnload"></div>
  <div class="showOnload"></div>
</div>
<div id="lodaDiv3" hidden="true" class="hideUnhidePanel"></div>

Answer 2

试试这个......

您可以使用＆＃34; find（）＆＃34;和手风琴身体是父母后代使用父母（）

<div id="lodaDiv" hidden="true"  class="hideUnhidePanel">
      <div class="showOnload">
      </div>
      <div class="showOnload">
      </div>
      <div class="showOnload">
      </div>
    </div>

   $('.hideUnhidePanel').each(function() {

if($(this).parent().find('.showOnload').length)
{
alert($(this).parent().find('.showOnload').length+'child exist');
}
});

REF：https://jsfiddle.net/5ddf2vz8/3/

Answer 3

简单的解决方案。

if($(".hideUnhidePanel .showOnload").length>0)
{
    alert("Child div with class .showOnload exists.);
}
else
{
    alert("Child div with class .showOnload do not exists.);
}

Working fiddle

Answer 4

$('.parentClassName').each(function() {
  if ($(this).children('.childClassName').length) {
    //if child class found, Here write your code
  }
});

子div中如何检查类名;使用jquery的父div？

4 个答案: