如何在 Javascript/jQuery 中檢查空 div？

Question

我在下面有 HTML 代碼，我想在其中檢查 javascript 中的空 div。 如果div.featured-block是空的，那么它應該在house-senate級別上應用display: none 。

HTML代碼：

<html class="js grunticon objectfit object-fit flexbox" lang="en-US">
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
    <div class="featured-block">

    </div>
</div>
</html>

這是我嘗試過但不起作用的方法。

jQuery代碼：

jQuery(function ($) {
    if ($(this).find("html:lang(en-US) .house-senate .featured-block").is(":empty")) {
        $(this).find(".house-senate").css("display", "none");   /* Display none */
    }
})

問題陳述：

我想知道我應該在上面的 jQuery 代碼中進行哪些更改，以便在div.featured-block為空時在house-senate類上應用display:none

Answer 1

那個div不是空的。 它實際上包含一個僅包含換行符的文本節點。

如果要檢查元素是否為空或僅包含空格，則應在修剪后檢查其內容。

 jQuery(function ($) { if ($(this).find("html:lang(en-US) .house-senate .featured-block").text().trim() === '') { $(this).find(".house-senate").css("display", "none"); /* Display none */ } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html class="js grunticon objectfit object-fit flexbox" lang="en-US"> <p>There should be a div with some text after this</p> <div class="focustop house-senate widget widget-cpac-depth -horizontal"> <p>This won't be visible</p> <div class="featured-block"> </div> </div> </html>

Answer 2

div 實際上不是空的，因為里面有空格。 我沒有像那樣檢查它是否為空，而是使用了children.length 。

這是僅適用於 Javascript 的有效解決方案：

 if (document.getElementsByClassName("featured-block")[0].children.length === 0) { document.getElementsByClassName("house-senate")[0].style.display = "none"; /* Display none */ }

 <html class="js grunticon objectfit object-fit flexbox" lang="en-US"> <span>Hello</span> <div class="focustop house-senate widget widget-cpac-depth -horizontal"> <div class="featured-block"> </div> </div> </html>

Answer 3

您的代碼有幾個問題。

通常，當有人執行$( this ).find() ， this是像<div> 、 <button>類的元素。 在您的代碼中， this是指window 。 雖然這似乎有效，但這里是使用 jQuery 搜索整個頁面的典型方法， $( 'html:lang(en-US) .house-senate .featured-block' ) 。

你的.featured-block實際上不是空的。 它里面有文本節點，所以is( ':empty' )會失敗。

 alert( $( 'html:lang(en-US) .house-senate .featured-block' ).is( ':empty' ) );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html class="js grunticon objectfit object-fit flexbox" lang="en-US"> <div class="focustop house-senate widget widget-cpac-depth -horizontal"> <div class="featured-block"> </div> </div> </html>

確保開始和結束 DIV 標簽之間沒有空格。

 alert( $( 'html:lang(en-US) .house-senate .featured-block' ).is( ':empty' ) );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html class="js grunticon objectfit object-fit flexbox" lang="en-US"> <div class="focustop house-senate widget widget-cpac-depth -horizontal"> <div class="featured-block"></div> </div> </html>

即使有了上面的修復，您的代碼仍然可能有問題。 如果頁面上有多個html:lang(en-US) .house-senate .featured-block元素，並且其中至少有一個是空的，那么$( 'html:lang(en-US) .house-senate .featured-block' ).is( ":empty" )將返回 true。 然后， $(this).find(".house-senate").css("display", "none"); 將隱藏頁面上的每個.house-senate 。 也就是說，如果$(this)問題已解決，像$( '.house-senated' ).css( 'display', 'none' ); .

 alert( $( 'html:lang(en-US) .house-senate .featured-block' ).is( ":empty" ) ); if ( $( 'html:lang(en-US) .house-senate .featured-block' ).is( ":empty" ) ) { $( '.house-senate' ).css( 'display', 'none' ); }

 .house-senate { padding: 2rem; border: 1px solid rebeccapurple; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html lang="en-US"> <div class="focustop house-senate widget widget-cpac-depth -horizontal"> <div class="featured-block"></div> </div> <div class="focustop house-senate widget widget-cpac-depth -horizontal"> <div class="featured-block">Not Empty</div> </div> <div class="focustop house-senate widget widget-cpac-depth -horizontal"> <div class="featured-block"><!-- I'm still empty. --></div> </div> </html>

還有一個問題：

if ( $( 'html:lang(en-US) .house-senate .featured-block' ).is( ":empty" ) ) {
  $( '.house-senate' ).css( 'display', 'none' );
}

這里的問題是支票和隱藏的內容之間沒有直接關聯。 您想要做的，而且我確定這就是您的意圖，是“僅當.house-senate的子.featured-block元素為空時才隱藏.house-senate 。”

您需要做的是獲取所有空的.featured-block元素，然后對於找到的每個空元素，將 DOM 樹從該元素向上移動到.house-senate並隱藏它。 這樣，空的和隱藏的之間就會發生緊密的耦合。

jQuery 總是對集合進行操作（想想數組）。 As a result, jQuery methods will "magically" work when a selector returns one or many elementsl without you needing to perform loops. 因此，您的代碼可以簡化為：

 $( '.featured-block:empty' ).parent().hide();

 .house-senate { padding: 2rem; border: 1px solid rebeccapurple; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html lang="en-US"> <div class="focustop house-senate widget widget-cpac-depth -horizontal"> <div class="featured-block"></div> </div> <div class="focustop house-senate widget widget-cpac-depth -horizontal"> <div class="featured-block">Not Empty</div> </div> <div class="focustop house-senate widget widget-cpac-depth -horizontal"> <div class="featured-block"><!-- I'm still empty. --></div> </div> </html>

注意：我不確定您的選擇器是否需要html:lang(en-US)和.house-senate 。 如果您確實需要為不同的語言做一些不同的事情，或者如果.featured-block存在於.house-senate元素之外，您可能需要重新添加它們。

如何在 Javascript/jQuery 中檢查空 div？

問題描述

3 個解決方案

解決方案1
2 2019-12-06 16:21:19

解決方案2
0 2019-12-06 16:13:50

解決方案3
0 2019-12-06 16:54:05

如何在 Javascript/jQuery 中檢查空 div？

問題描述

3 個解決方案

解決方案1 2 2019-12-06 16:21:19

解決方案2 0 2019-12-06 16:13:50

解決方案3 0 2019-12-06 16:54:05

解決方案1
2 2019-12-06 16:21:19

解決方案2
0 2019-12-06 16:13:50

解決方案3
0 2019-12-06 16:54:05