如何通过JavaScript动态隐藏第一个“ N”个DT和DD标签?

时间:2018-08-06 08:55:18

标签: javascript jquery html tags hide

我正在生成带有描述标签的数据库报告,在这里我要隐藏第一个DT / DD元素(*,因为它们是空值的结果,我不能跳过)。

正在像这样生成标记...

<dl>
 <h3 style="text-align: center">01-SEP-2018</h3>
  <h3>
  <dt >
     Time Slot
  </dt>
  <dd >
     UNASSIGNED
  </dd>
  <dt >
     Morning Shift
  </dt>
  <dd >
     <label for="f01_0000">Morning Shift</label>
     <select name="f01" id="f01_0000">
        <option value="NULL" selected="selected">UNASSIGN</option>
        <option value="Aslam">Aslam</option>
        <option value="Brock">Brock</option>
     </select>
  </dd>
  <dt >
     Evening Shift
  </dt>
  <dd >
     <label for="f02_0000">Evening Shift</label>
     <select name="f02"  id="f02_0000">
        <option value="NULL" selected="selected">UNASSIGN</option>
        <option value="Aslam">Aslam</option>
        <option value="Brock">Brock</option>
     </select>
  </dd>
  <dt >
     Resource Type
  </dt>
  <dd >
     UNASSIGNED
  </dd>
  <dt >
     Port Code
  </dt>
  <dd >
     UNASSIGNED
  </dd>
  <dt >
     Time Slot
  </dt>
  <dd >
     8
  </dd>
  <dt >
     Morning Shift
  </dt>
  <dd >
     <label for="f01_0001">Morning Shift</label>
     <select name="f01">
        <option value="NULL">UNASSIGN</option>
        <option value="Aslam">Aslam</option>
        <option value="Brock" selected="selected">Brock</option>

     </select>
  </dd>
  <dt >
     Evening Shift
  </dt>
  <dd >
     <label for="f02_0001">Evening Shift</label>
     <select name="f02" id="f02_0001">
        <option value="NULL">UNASSIGN</option>
        <option value="Aslam" selected="selected">Aslam</option>
        <option value="Brock">Brock</option>
     </select>
  </dd>
  <dt >
     Resource Type
  </dt>
  <dd >
     SKIPPER
  </dd>
  <dt >
     Port Code
  </dt>
  <dd >
     AEKHL
  </dd>
</h3>
<h3 style="text-align: center">05-SEP-2018</h3>
<h3>
  <dt >
     Time Slot
  </dt>
  <dd >
     8
  </dd>
  <dt >
     Morning Shift
  </dt>
  <dd >
     <label for="f01_0002" >Morning Shift</label>
     <select name="f01" >
        <option value="NULL">UNASSIGN</option>
        <option value="Aslam" selected="selected">Aslam</option>
        <option value="Brock">Brock</option>

     </select>
  </dd>
  <dt >
     Evening Shift
  </dt>
  <dd >
     <label for="f02_0002"  >Evening Shift</label>
     <select name="f02" >
        <option value="NULL">UNASSIGN</option>
        <option value="Aslam">Aslam</option>
        <option value="Brock" selected="selected">Brock</option>

     </select>
  </dd>
  <dt >
     Resource Type
  </dt>
  <dd >
     SKIPPER
  </dd>
  <dt >
     Port Code
  </dt>
  <dd >
     AEKHL
  </dd>
 </h3>
</dl>

我想隐藏第一个DT&DD标签,默认情况下会在其中生成UNASSIGNED。为此,我写了一个Jquery的小片段,将与Page Loading一起执行

$("dl").find("dt").each(function() {
var count = 0;
$(this).nextUntil("dt").filter(function() {
  return count++ >1;
 }).hide();
});

这以前曾解决过类似的问题,但不幸的是,在这种情况下,我无法解决。

enter image description here

1 个答案:

答案 0 :(得分:0)

这怎么样?

    $("dl").find("dd").each(function() {
        var $thisDD = $(this);

        if( 
            $.trim($thisDD.text()) == 'UNASSIGNED'
            ||
            $thisDD.find('select').val() == 'NULL'
        ) {
            $thisDD.hide();
            $thisDD.prev('dt').hide();
        }
    });