如何测试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 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页面的头部即可。

优秀!!!这工作！ – webdevsoup 2011-04-06 02:47:10

答

.toggle()需要一个布尔值（显示/隐藏）

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

这也不起作用。我不想切换链接，如果没有div，我不希望链接显示。 – webdevsoup 2011-04-05 18:58:41

约翰，这不是我要找的。我试过切换（），隐藏（）和显示（），并没有任何改变任何东西。我试图用CSS隐藏它，并将它隐藏起来（链接）。但是，我认为在测试逻辑方面存在失败。 – webdevsoup 2011-04-05 19:20:36

答

你试过了吗

$("div:first-child")

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

啊或者你的帖子被编辑了很多，或者我误解了。看这里http://*.com/questions/520481/jquery-if-div-does-not-exist – 2011-04-05 21:01:03

答

如果DIV是有，但隐藏，因为它没有任何内容，你可以尝试

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

不，这个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/样本

我完全按照你所说的复制和粘贴，但它不起作用。如果div没有内容，div就不会显示出来。它的显示没有设置为none，它根本不填充div。 – webdevsoup 2011-04-05 18:56:23

如何测试DIV以查看它是否存在

相关推荐