如何檢查class div中是否存在子div;父div使用jquery的？

如何檢查div類中的div類是否存在？如何檢查class div中是否存在子div;父div使用jquery的？

在下面的例子中;我想檢查裏面是否存在「showOnload」div類;父div類「hideUnhidePanel」？

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

更新：
說明 - >在小提琴，它會顯示警告三次;但實際上它應該只顯示兩次;作爲第三個showHidePanel沒有「showOnload」類。

來源

2015-07-02 fatherazrael

我認爲這是在你的jsfiddle已經工作 – ketan

@Ketan 否;它顯示警報三次;但實際上它應該只顯示兩次，因爲第三個showHidePanel沒有「showOnload」類。 – fatherazrael

.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（）

$('.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>

來源

2015-07-02 05:16:06

謝謝。所以，如果我說在div class showonload中的一些自定義屬性就像在所有三個子div中說數據ID =銀行.......但我想獲取一個數據ID然後我認爲這是好方法 - > .. 。$（this）.children（'。showOnload'）。data（「id」） – fatherazrael

@fatherazrael that should be fine .... it will always give value of the first'showOnload' child of this' this' –

嘗試......

您可以使用「查找（）」和手風琴的身體是父母descensent使用父（）使用搜索類

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

來源

2015-07-02 05:23:29

簡單的解決方案。

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

Working fiddle

來源

2015-07-03 14:04:29 Hemal

如何檢查class div中是否存在子div;父div使用jquery的？

回答

相關問題