Pick up Label text only if Label exists

Question

Pick up Label text only if Label exists

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Follow 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'd like to get all label texts within .form-group . Here is the code:

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

However, the script tries to get text from a label on the buttons and console.log returns blank space. Follow photo:

I do not know why this happens. Would anyone explain?

javascript jquery

asked by anonymous 30.08.2017 / 21:47

3 answers

0

Try 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><divclass="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 -->

In this way it first checks to see if the label is empty and only prints if it is not empty.

30.08.2017 / 21:51

0

You can use the jQuery selector .find("label:not(:empty)") and 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><divclass="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>

30.08.2017 / 21:55

Miniature Photo Gallery [closed] Dependency is not added to the clojure project

score 0 · Accepted Answer

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

$(this) - > Get the current element each

.find("label") - > search all tags label descendants of previous return

.text() - > Get the text of the labes tags returned

console.log (...) - > Send to log the return of text()

That is, in step 2, if it does not find the label tag it will look for the text and will not get anything, returning nothing to console.log , which in turn receives an empty value and prints a value empty.

To solve this, you need to first check if there is any label in each, here's 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><divclass="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 -->