Picking up the label text only if there is a label

Question

Follows the HTML:

<div class="tab-pane" id="etapa3">
    <div class="well">
        <div class="row informativo">
            <!-- Aqui vai ser inserida a tabela via Jquery -->
        </div>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <label class="control-label">Capital de Giro:</label>
        <div class="input-group">
            <span class="input-group-addon">R$</span>
            <input type="text" class="form-control money" name="txt_capitalGiro">
        </div>
    </div>
    <div class="row">
        <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 "> 
            <button type="button" data-aprovacao="Aprovado" class="btn btn-primary btn-block aprovado">Aprovado</button>
        </div>
        <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 "> 
            <button type="button" data-aprovacao="Reprovado" class="btn btn-primary btn-block reprovado">Reprovado</button>
        </div>
        <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 "> 
            <button type="button" data-aprovacao="Revisar" class="btn btn-primary btn-block revisar">Revisar</button>
        </div>
        <input name="reg_etapa3" type="hidden">
    </div>
    <div class="row div-Invisivel">
        <div class="panel panel-danger">
            <div class="panel-heading">Justificativa:</div>
            <div class="panel-body">
                <textarea class="form-control" name="just_3" rows="5"></textarea>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">Observações:</div>
        <div class="panel-body">
            <textarea class="form-control" name="txtArea_observacaoEtapa3" rows="5"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-xs-12 col-sm-12 col-md-7 col-lg-7"> 
            <label class="control-label">Responsável:</label>
            <input type="text" class="form-control" id="colab_3" name="colab_3">
        </div>
        <div class="form-group col-xs-12 col-sm-12 col-md-2 col-lg-3">
            <label class="control-label">Data:</label>
            <input type="text" class="form-control" id="data_3" name="data_3">
        </div>
        <div class="form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
            <label class="control-label">Hora:</label>
            <input type="text" class="form-control" id="hora_3" name="hora_3">
        </div>
    </div>
</div>  <!-- Fecha Etapa 03 -->

I would like to get all the texts of the Abels within the .form-group. Follows the code:

$("#etapa3").find(".form-group").not('.well .form-group').each(function(){
    console.log($(this).find("label").text());
});

But the script tries to get the text of a label on the buttons and the console.log returns blank space. Picture below:

I don’t know why it happens. Someone could explain to me?

Answer 1

Try it like this:

$("#etapa3").find(".form-group").not('.well .form-group').each(function(){
    if ($(this).find("label").text() != ""){
       console.log($(this).find("label").text());
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane" id="etapa3">
        <div class="well">
            <div class="row informativo">
                <!-- Aqui vai ser inserida a tabela via Jquery -->
            </div>
        </div>
        <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <label class="control-label">Capital de Giro:</label>
            <div class="input-group">
                <span class="input-group-addon">R$</span>
                <input type="text" class="form-control money" name="txt_capitalGiro">
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 "> 
                <button type="button" data-aprovacao="Aprovado" class="btn btn-primary btn-block aprovado">Aprovado</button>
            </div>
            <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 "> 
                <button type="button" data-aprovacao="Reprovado" class="btn btn-primary btn-block reprovado">Reprovado</button>
            </div>
            <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 "> 
                <button type="button" data-aprovacao="Revisar" class="btn btn-primary btn-block revisar">Revisar</button>
            </div>
            <input name="reg_etapa3" type="hidden">
        </div>
        <div class="row div-Invisivel">
            <div class="panel panel-danger">
                <div class="panel-heading">Justificativa:</div>
                <div class="panel-body">
                    <textarea class="form-control" name="just_3" rows="5"></textarea>
                </div>
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">Observações:</div>
            <div class="panel-body">
                <textarea class="form-control" name="txtArea_observacaoEtapa3" rows="5"></textarea>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-12 col-sm-12 col-md-7 col-lg-7"> 
                <label class="control-label">Responsável:</label>
                <input type="text" class="form-control" id="colab_3" name="colab_3">
            </div>
            <div class="form-group col-xs-12 col-sm-12 col-md-2 col-lg-3">
                <label class="control-label">Data:</label>
                <input type="text" class="form-control" id="data_3" name="data_3">
            </div>
            <div class="form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
                <label class="control-label">Hora:</label>
                <input type="text" class="form-control" id="hora_3" name="hora_3">
            </div>
        </div>
    </div>  <!-- Fecha Etapa 03 -->

That way he first checks whether the label is empty and only prints if it is not empty.

Answer 2

This is because when printing the log with the line console.log($(this).find("label").text()); it executes in the following sequence:

1. $(this) -> Takes the current element o each
2. .find("label") -> search all tags label descended from the previous return
3. .text() -> Take the tag text labes returnees
4. console.log(...) -> Sends the return to the log text()

That is, in step 2, if it does not find the tag label it will search the text and will have nothing, returning nothing to the console.log, which in turn takes an empty value and prints an empty value.

To resolve this, you need to check before if there is any label on each, below is an example:

$("#etapa3").find(".form-group").not('.well .form-group').each(function(){
    if($(this).find("label").length > 0) {
      console.log($(this).find("label").text());
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane" id="etapa3">
        <div class="well">
            <div class="row informativo">
                <!-- Aqui vai ser inserida a tabela via Jquery -->
            </div>
        </div>
        <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <label class="control-label">Capital de Giro:</label>
            <div class="input-group">
                <span class="input-group-addon">R$</span>
                <input type="text" class="form-control money" name="txt_capitalGiro">
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 "> 
                <button type="button" data-aprovacao="Aprovado" class="btn btn-primary btn-block aprovado">Aprovado</button>
            </div>
            <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 "> 
                <button type="button" data-aprovacao="Reprovado" class="btn btn-primary btn-block reprovado">Reprovado</button>
            </div>
            <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 "> 
                <button type="button" data-aprovacao="Revisar" class="btn btn-primary btn-block revisar">Revisar</button>
            </div>
            <input name="reg_etapa3" type="hidden">
        </div>
        <div class="row div-Invisivel">
            <div class="panel panel-danger">
                <div class="panel-heading">Justificativa:</div>
                <div class="panel-body">
                    <textarea class="form-control" name="just_3" rows="5"></textarea>
                </div>
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">Observações:</div>
            <div class="panel-body">
                <textarea class="form-control" name="txtArea_observacaoEtapa3" rows="5"></textarea>
            </div>
        </div>
        <div class="row">
            <div class="form-group col-xs-12 col-sm-12 col-md-7 col-lg-7"> 
                <label class="control-label">Responsável:</label>
                <input type="text" class="form-control" id="colab_3" name="colab_3">
            </div>
            <div class="form-group col-xs-12 col-sm-12 col-md-2 col-lg-3">
                <label class="control-label">Data:</label>
                <input type="text" class="form-control" id="data_3" name="data_3">
            </div>
            <div class="form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
                <label class="control-label">Hora:</label>
                <input type="text" class="form-control" id="hora_3" name="hora_3">
            </div>
        </div>
    </div>  <!-- Fecha Etapa 03 -->

Answer 3

You can use the jQuery selector .find("label:not(:empty)") and so it is already filtered.

$("#etapa3").find(".form-group").not('.well .form-group').find("label:not(:empty)").each(function() {
  console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane" id="etapa3">
  <div class="well">
    <div class="row informativo">
      <!-- Aqui vai ser inserida a tabela via Jquery -->
    </div>
  </div>
  <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <label class="control-label">Capital de Giro:</label>
    <div class="input-group">
      <span class="input-group-addon">R$</span>
      <input type="text" class="form-control money" name="txt_capitalGiro">
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 ">
      <button type="button" data-aprovacao="Aprovado" class="btn btn-primary btn-block aprovado">Aprovado</button>
    </div>
    <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 ">
      <button type="button" data-aprovacao="Reprovado" class="btn btn-primary btn-block reprovado">Reprovado</button>
    </div>
    <div class="form-group col-xs-12 col-sm-2 col-md-2 col-lg-2 ">
      <button type="button" data-aprovacao="Revisar" class="btn btn-primary btn-block revisar">Revisar</button>
    </div>
    <input name="reg_etapa3" type="hidden">
  </div>
  <div class="row div-Invisivel">
    <div class="panel panel-danger">
      <div class="panel-heading">Justificativa:</div>
      <div class="panel-body">
        <textarea class="form-control" name="just_3" rows="5"></textarea>
      </div>
    </div>
  </div>
  <div class="panel panel-info">
    <div class="panel-heading">Observações:</div>
    <div class="panel-body">
      <textarea class="form-control" name="txtArea_observacaoEtapa3" rows="5"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-7 col-lg-7">
      <label class="control-label">Responsável:</label>
      <input type="text" class="form-control" id="colab_3" name="colab_3">
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-2 col-lg-3">
      <label class="control-label">Data:</label>
      <input type="text" class="form-control" id="data_3" name="data_3">
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-2 col-lg-2">
      <label class="control-label">Hora:</label>
      <input type="text" class="form-control" id="hora_3" name="hora_3">
    </div>
  </div>
</div>