jQuery在div中的元素div中循环

Question

我想获取div元素内部的输入，选择，标签之类的元素。

当我使用以下代码时，代码值将打印多次。

$('div *').each(function() {

请让我知道从div标签获取元素的最佳方法。

$('#tblWorksheet tbody').empty();


$('#Worksheet').each(function() {

  var tdworksheet = '';

  $('div *').each(function() {

    var theTag = $(this).prop("tagName");
    var theValue;

    if (theTag == "LABEL") {
      theValue = $(this).attr('title')
      tdworksheet += "<tr><td class='col-sm-2'><b>" + theValue + "</b></td></tr>"
    } else if (theTag == "INPUT") {
      theValue = $(this).val();
      tdworksheet += "<tr><td class='col-sm-2'><b>" + theValue + "</b></td></tr>"
    } else if (theTag == "SELECT") {
      tdworksheet += "<tr><td class='col-sm-2'><b>" + theValue + "</b></td></tr>"
      //  alert(theValue);
    }

    $('#tblWorksheet tbody').append(tdworksheet);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblWorksheet" class="table">
  <tbody></tbody>
</table>

<div id="Worksheet" class="tab-pane fade">
  <div class="container">
    <div class="panel panel-info">
      <div class="panel-heading"> <strong> Deck Area and Cost </strong></div>
      <div class="panel-body">
        <div>

          <div>
            <p class="text-info" style="margin-left:10px;">
              Please enter the following deck information.
            </p>

          </div>

          <div>
            <label for="Deck Area" title="Deckareasss">Total Deck Area </label>

            <input class="form-control-sm numericOnly" data-val="true" data-val-required="The DISTAREA field is required." id="DISTAREA" name="DISTAREA" placeholder="Deck Area" size="10" type="text" value="1000" /> &nbsp;SQ. FT.
          </div>

          <div>
            <label title="costsurya" for="Cost">Estimated Cost $</label>

            <input class="form-control-sm numericOnly" id="EstimatedCost" name="EstimatedCost" placeholder="Estimated Cost $" size="15" type="text" value="200" /> &nbsp;.00
          </div>

        </div>
      </div>
    </div>
  </div>

Answer 1

你是这个意思吗？

使用Selector context和ternary operator简化代码

$("#calc").on("click", function() {
  $('#tblWorksheet tbody').empty();
  $('label, input, select','#Worksheet').each(function() { // context is #Worksheet
    var theTag = this.tagName,
      theValue =  theTag == "LABEL" ? $(this).attr('title') : $(this).val();
    $('#tblWorksheet tbody')
      .append("<tr><td class='col-sm-2'><b>" + theValue + "</b></td></tr>");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Worksheet" class="tab-pane fade">
  <div class="container">
    <div class="panel panel-info">
      <div class="panel-heading"> <strong> Deck Area and Cost </strong></div>
      <div class="panel-body">
        <div>
          <div>
            <p class="text-info" style="margin-left:10px;">
              Please enter the following deck information.
            </p>
          </div>
          <div>
            <label for="Deck Area" title="Deckareasss">Total Deck Area </label>
            <input class="form-control-sm numericOnly" data-val="true" data-val-required="The DISTAREA field is required." id="DISTAREA" name="DISTAREA" placeholder="Deck Area" size="10" type="text" value="1000" /> &nbsp;SQ. FT.
          </div>
          <div>
            <label title="costsurya" for="Cost">Estimated Cost $</label>
            <input class="form-control-sm numericOnly" id="EstimatedCost" name="EstimatedCost" placeholder="Estimated Cost $" size="15" type="text" value="200" /> &nbsp;.00
          </div>
          <div>
            <label title="costsel" for="Sel">Selected Cost $</label>
            <select class="form-control-sm numericOnly" id="SelectedCost" name="SelectedCost">
              <option value="">Select</option>
              <option value="100">100</option>
              <option value="200">200</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button type="button" id="calc">Calc</button>

  <table id="tblWorksheet" class="table">
    <tbody></tbody>
  </table>