Question

我正在遍历html内容并显示在其他表中。在阅读时，如果div元素显示为：none，那么我想跳过整个div部分。

在下面的示例中，需要隐藏“属性大小，100”行。

请让我知道最佳选择。

非常感谢您。

苏里亚。

$('#tblWorksheet tbody').empty();
var tdworksheet;
 
$('#Worksheet label, #Worksheet input, #Worksheet select').each(function(index, element) { // context is 
  var theTag = this.tagName;
  var TF;
     
      if($(this).parent().get( 0 ).tagName == 'DIV' )
			{
            //hide entire div section          
			}
      
      if (theTag == "LABEL") {
        theValue = $(this).attr('title')

        if (theValue != null)
          tdworksheet += "<tr><td class='col-sm-2'><b>" + theValue + "</b></td>>"
      } else if (theTag == "INPUT" && this.type == 'text') {
        theValue = $(this).val();

        if (theValue != null)
          tdworksheet += "<td class='col-sm-2'><b>" + theValue + "</b></td></tr>"
      }
      });

$('#tblWorksheet tbody').append(tdworksheet);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblWorksheet" border=1>
  <tbody></tbody>
</table>


<div id="Worksheet" class="divparent">

  <div>
    <p class="text-info" style="margin-left:10px;">
      Please enter the following deck information.
    </p>

  </div>

  <div class="row" id="divProp" style="display:none;">
    <div class=" col-md-5 text-right">
      <label title="Property Size">Property Size</label>

    </div>
    <div class="col-sm-4 text-left">
      <input class="form-control" id="propsize" name="PropSize" type="text" value="100" />
      
    </div>
  </div>


  <div class="row" id="divWorkType">
    <div class="col-md-5 text-right">
      <label id="lblWorkType" title="WorkType">Work Type</label>

    </div>
    <div class="col-sm-4 text-left">
      <input Value="DISTURB" class="form-control" disabled="True" id="WORKTYPE" name="WORKTYPE" type="text" value="" />
    </div>
  </div>
  </div>

Answer 1

您可以结合使用jQuery的.is()和:visible选择器来检查div的可见性。看来您还想确保它是一个div，所以您的条件将是这样的：

var $parent = $(this).parent();

if($parent.is('div') && !$parent.is(':visible')) {
    return true; // continue to next loop iteration
}

Answer 2

这里是完整的代码。

$('#tblWorksheet tbody').empty();
var tdworksheet;
 
$('#Worksheet label, #Worksheet input, #Worksheet select').each(function(index, element) { // context is 
  var theTag = this.tagName;
  var TF;
     
      if($(this).parent().is('div') && !$(this).parent().is(':visible'))
			{
              return true;         
			}
      
      if (theTag == "LABEL") {
        theValue = $(this).attr('title')

        if (theValue != null)
          tdworksheet += "<tr><td class='col-sm-2'><b>" + theValue + "</b></td>>"
      } else if (theTag == "INPUT" && this.type == 'text') {
        theValue = $(this).val();

        if (theValue != null)
          tdworksheet += "<td class='col-sm-2'><b>" + theValue + "</b></td></tr>"
      }
      });

$('#tblWorksheet tbody').append(tdworksheet);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblWorksheet" border=1>
  <tbody></tbody>
</table>


<div id="Worksheet" class="divparent">

  <div>
    <p class="text-info" style="margin-left:10px;">
      Please enter the following deck information.
    </p>

  </div>

  <div class="row" id="divProp" style="display:none;">
    <div class=" col-md-5 text-right">
      <label title="Property Size">Property Size</label>

    </div>
    <div class="col-sm-4 text-left">
      <input class="form-control" id="propsize" name="PropSize" type="text" value="100" />
      
    </div>
  </div>


  <div class="row" id="divWorkType">
    <div class="col-md-5 text-right">
      <label id="lblWorkType" title="WorkType">Work Type</label>

    </div>
    <div class="col-sm-4 text-left">
      <input Value="DISTURB" class="form-control" disabled="True" id="WORKTYPE" name="WORKTYPE" type="text" value="" />
    </div>
  </div>
  </div>

在显示html内容时不显示div时跳过div部分

2 个答案: