Question

好的，我正在使用Drupal作为客户端的CMS，他们有一个特定的请求。他们希望左侧显示导航类型栏，显示有关其大学课程的信息。但是，如果他们的字段不包含任何信息，则他们不希望显示链接。

所以，我的问题是，如何测试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>

Answer 1

.toggle()采用布尔值（显示/隐藏）

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

Answer 2

你试过吗

$("div:first-child")

Answer 3

如果DIV存在但由于没有内容而被隐藏，您可以尝试

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

Answer 4

似乎你还需要一个可重复使用的功能：

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/

Answer 5

我认为只需将已有的代码包装在文档就绪代码段中就可以了。

$(document).ready(function(){ 

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

 });

只需将代码放在脚本标记内的HTML页面的头部。

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

5 个答案: