如何測試DIV以查看它是否存在

好的，我將Drupal用作客戶端的CMS，並且他們有特定的請求。他們想要在左側顯示導航類型欄，以顯示有關其大學課程的信息。但是，如果他們的領域不包含任何信息，他們不希望鏈接出現。如何測試DIV以查看它是否存在

所以，我的問題是，我將如何測試div CLASS以查看它是否存在，然後顯示或隱藏相應的鏈接？

這裏是我的代碼：

<script> 

if ($('.testimonials').length) 
{ 
    $('#testimon').show(); 
} 
else 
{ 
    $('#testimon').hide(); 
} 
</script> 
<a href="#" id="descrip">Program Description</a><br /> 
<a href="#" id="admis">Admission Requirements</a><br /> 
<a href="#" id="career">Career Opportunities</a><br /> 
<a href="#" id="co_op">Co-Op Diploma</a><br /> 
<a href="#" id="outcomes">Program Outcomes</a><br /> 
<a href="#" id="struc">Program Structure</a><br /> 
<a href="#" id="testimon">Student Testimonials</a><br /> 
<a href="#" id="transfer">Transferability</a><br /> 
<a href="#" id="tuition">Tuition and Fees</a><br />

我對於給定下面的類測試的DIV：<div class="testimonials">

目前，「學生感言」不包含任何信息，所以在div實際上隱藏。它甚至不顯示它是否包含任何內容。

任何幫助將是偉大的，謝謝！

編輯編輯編輯

我的道歉，該DIV不隱藏，它只是不是所有的填充。所以，而不是顯示div，實際上沒有任何東西。它跳過該字段，然後進入「可轉換性」。

編輯編輯編輯

也許它會幫助，如果你看到的頁面裏面的代碼：

<div class="main_top"> 

    Business Administration - Business 
</div> 
<div class="prog_descrip"> 
    <label>Program description:</label> 
    ....SOME CODE.... 
</div> 
<div class="admin_req"> 
    <label>Admission Requirements:</label> 
    <div class="ExternalClassF9C2869A55724649B235CB0F312F44EA"> 
    ....SOME CODE.... 
    </div> 
</div> 
<div class="career_opp"> 
    <label>Career Opportunities:</label> 
    <div class="ExternalClass86EA926232844F31914AB54479958286"> 
    ....SOME CODE.... 
    </div> 
</div> 
<div class="co_op_diploma"> 
    <label>Co-Op Diploma:</label> 
    <div class="ExternalClass921A20DCA14344B4A5B8C320CBBCCAC2"> 
    ....SOME CODE.... 
    </div> 
</div> 
<div class="prog_out"> 
    <label>Program Outcomes:</label> 
    <div class="ExternalClass2964EBDD55244ABDB4DB35FBCC3DF19F"> 
    ....SOME CODE.... 
    </div> 
</div> 
<div class="prog_struc"> 
    <label>Program Structure:</label> 
    <div class="ExternalClassDE705C7CFB1149ED8C164122009A235E"> 
    ....SOME CODE.... 
    </div> 
</div> 
<div class="transfer"> 
    <label>Transferability:</label> 
    <div class="ExternalClass7A18D2A8B34D458C89E330E9C6FF4B61"> 
    ....SOME CODE.... 
    </div> 
</div> 
<div class="tuition"> 
    <label>Tuition And Fees:</label> 
    <div class="ExternalClassC8C745D8B6FA46F9B3E20E6AC95D0933"> 
    ....SOME CODE.... 
    </div> 
</div>

來源

2011-04-05 webdevsoup

這對我來說還不清楚，你的代碼或多或少的檢查了這一點。 – 2011-04-05 18:15:14

約翰 - 檢查我的編輯。基本上，發生的事情是，div甚至不會被打印到屏幕上。所以，div不在那裏。因此，我想檢查並查看div是否存在...如果它沒有內容，則不存在。 – webdevsoup 2011-04-05 19:06:28

啊啊，我修改了下面的答案。它現在檢查元素是否存在，並檢查它是否有內容。讓我知道這是你在找什麼。 – 2011-04-05 19:15:14

我想只是將已經存在於文檔準備好的代碼片段中的代碼包裝起來。

$(document).ready(function(){ 

     if ($('.testimonials').length) 
     { 
      $('#testimon').show(); 
     } 
     else 
     { 
      $('#testimon').hide(); 
     } 

});

只需將該代碼放置在腳本標記內的HTML頁面的頭部即可。

來源

2011-04-05 20:44:19 Omar

優秀!!!這工作！ – webdevsoup 2011-04-06 02:47:10

.toggle()需要一個布爾值（顯示/隱藏）

$('#testimon').toggle($('.testimonials:not(:empty)').length);

來源

2011-04-05 18:17:01

這也不起作用。我不想切換鏈接，如果沒有div，我不希望鏈接顯示。 – webdevsoup 2011-04-05 18:58:41

約翰，這不是我要找的。我試過切換（），隱藏（）和顯示（），並沒有任何改變任何東西。我試圖用CSS隱藏它，並將它隱藏起來（鏈接）。但是，我認爲在測試邏輯方面存在失敗。 – webdevsoup 2011-04-05 19:20:36

你試過了嗎

$("div:first-child")

來源

2011-04-05 18:22:01

什麼是div：第一個孩子要做什麼？你的意思是div：推薦？ – webdevsoup 2011-04-05 19:00:19

啊或者你的帖子被編輯了很多，或者我誤解了。看這裏http://stackoverflow.com/questions/520481/jquery-if-div-does-not-exist – 2011-04-05 21:01:03

如果DIV是有，但隱藏，因爲它沒有任何內容，你可以嘗試

$(".testimonials").is(':visible')

來源

2011-04-05 18:25:47 Omar

不，這個div根本就沒有。我需要測試一下，看看它是否存在，因爲如果是，那就是當我需要鏈接出現時。 – webdevsoup 2011-04-05 18:54:54

好像你需要一個可重複使用的功能以及：

 
function isHidden(elm,target) { 
    // if whether it is non-existent, or hidden via css 
    if (elm.length===0 || elm.is(":hidden")) { 
     target.hide(); 
    } 
}
 
var elm = $(".testimonials"), target = $("#testimon"); 
isHidden(elm,target);

這個腳本的@ http://jsfiddle.net/99d6e/樣本

來源

2011-04-05 18:30:26 hmabesa

我完全按照你所說的複製和粘貼，但它不起作用。如果div沒有內容，div就不會顯示出來。它的顯示沒有設置爲none，它根本不填充div。 – webdevsoup 2011-04-05 18:56:23

如何測試DIV以查看它是否存在

回答

相關問題