Targeting child elements within nested for each loops in jQuery

Question

My question is exactly the same as Targeting $(this) within nested for each loops in jQuery but I can't make it work for some reason. Here is my code:

$(document).ready(function() {
    var rows=$('.row');
    var count = 0;
    $.each(rows, function() {
        console.log(".row "+count++);
        var row = $(this);
        var cells = row.find('span.RIF_Field');
        if (cells.length > 0) {
            console.log("cells "+cells.length);
            var hidden = true;
            $.each(cells, function() {
                if(!$(this).is(':hidden')) {
                    console.log($(this).id + " is visible");
                    hidden = false;
                }
            });
            if (hidden)  {
                console.log("nothing is visible");
                row.hide();
            }
        }
    });
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    
<div class="row"><div class="col-sm-6"><br style="clear:both;">
<div class="RIF_Field RIF_Street" id="yourStreet" style="float:left;width:200px;"><label class="fldLbl" id="yourStreetLabel">Address Line 1:</label><br>
<span style="white-space: nowrap;"><input id="yourStreetValue" maxlength="35" name="yourStreet" size="32" style="width:200px;" type="text"><img alt="" height="9" id="yourStreetReqdImg" src="/img/1.gif" width="11"></span></div>
</div>
<div class="col-sm-6"><br style="clear:both;">
<div class="RIF_Field RIF_Addr2" id="yourAddr2" style="float:left;width:200px;"><label class="fldLbl" id="yourAddr2Label">Address Line 2:</label><br>
<span style="white-space: nowrap;"><input id="yourAddr2Value" maxlength="35" name="yourAddr2" size="32" style="width:200px;" type="text"><img alt="" height="9" id="yourAddr2ReqdImg" src="/img/1.gif" width="11"></span><br>
<span class="RIF_description">Test</span></div>
</div>
</div>
    
    
<div class="row"><div class="col-sm-6"><br style="clear:both;">
<div class="RIF_Csp3" id="yourCsp3" style="float:left;"><span class="RIF_Field RIF_State" id="yourState" style="display: none;"><label class="fldLbl" id="yourStateLabel">Other Address Information:</label><br>
<span style="white-space: nowrap;"><input type="text" size="15" maxlength="15" id="yourStateValue" name="yourState" onchange="null" onfocus="null" onblur="null" tabindex="0" class="ui-autocomplete-input" autocomplete="off"><img alt="" height="9" id="yourStateReqdImg" src="/img/1.gif" width="11"></span></span></div>
</div>
<div class="col-sm-6"><div></div>
</div>
</div>
    
 <div class="row"><div class="col-sm-6"><br style="clear:both;">
<div class="RIF_Field RIF_Phone" id="yourPhone" style="float:left;width:300px;"><label class="fldLbl" id="yourPhoneLabel">Telephone:</label><br>
<span style="white-space: nowrap;"><input id="yourPhoneValue" maxlength="15" name="yourPhone" size="15" style="width:300px;" type="text"><img alt="" height="9" id="yourPhoneReqdImg" src="/img/1.gif" width="11"></span></div>
<div class="RIF_Field RIF_Extension" id="yourExtension" style="float:left;width:100px;"><label class="fldLbl" id="yourExtensionLabel">Ext.:</label><br>
<span style="white-space: nowrap;"><input id="yourExtensionValue" maxlength="5" name="yourExtension" size="5" style="width:100px;" type="text"><img alt="" height="9" id="yourExtensionReqdImg" src="/img/1.gif" width="11"></span></div>
</div>
<div class="col-sm-6"><br style="clear:both;">
<div class="RIF_Field RIF_Email" id="yourEmail" style="float:left;width:400px;"><label class="fldLbl" id="yourEmailLabel">E-mail:</label><br>
<span style="white-space: nowrap;"><input id="yourEmailValue" maxlength="50" name="yourEmail" size="32" style="width:400px;" type="text"><img alt="" height="9" id="yourEmailReqdImg" src="/img/1.gif" width="11"></span></div>
</div>
</div>   
    
    
</div>

I am trying to hide the .row element that has all cells hidden. What am I doing wrong?

In case I was not clear, my problem is that the row containing "Other Address Information:" should be hidden, to avoid the gap in view. Also the console output makes no sense. — Len Yabloko, Oct 14 '15 at 15:38

Dave · Accepted Answer · 2015-10-14T15:58:28.810

The code cells.size() is not valid you want cells.length. Also it will never be null.

$(document).ready(function() {
  var rows=$('.row');
  var count = 0;
  $.each(rows, function() {
    console.log(".row "+count++);
    var row = $(this);
    var cells = row.find('span.RIF_Field');
    if (cells.length > 0) {
      console.log("cells "+cells.length);
      var hidden = true;
      $.each(cells, function() {
        if(!$(this).is(':hidden'))
          console.log($(this).id + " is visible");
        hidden = false;
      });
      if (hidden)  {
        console.log("nothing is visible");
        row.hide();
      }
    }
  });
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">

  <div class="row"><div class="col-sm-6"><br style="clear:both;">
    <div class="RIF_Field RIF_Street" id="yourStreet" style="float:left;width:200px;"><label class="fldLbl" id="yourStreetLabel">Address Line 1:</label><br>
      <span style="white-space: nowrap;"><input id="yourStreetValue" maxlength="35" name="yourStreet" size="32" style="width:200px;" type="text"><img alt="" height="9" id="yourStreetReqdImg" src="/img/1.gif" width="11"></span></div>
    </div>
    <div class="col-sm-6"><br style="clear:both;">
      <div class="RIF_Field RIF_Addr2" id="yourAddr2" style="float:left;width:200px;"><label class="fldLbl" id="yourAddr2Label">Address Line 2:</label><br>
        <span style="white-space: nowrap;"><input id="yourAddr2Value" maxlength="35" name="yourAddr2" size="32" style="width:200px;" type="text"><img alt="" height="9" id="yourAddr2ReqdImg" src="/img/1.gif" width="11"></span><br>
        <span class="RIF_description">Test</span></div>
    </div>
  </div>


  <div class="row"><div class="col-sm-6"><br style="clear:both;">
    <div class="RIF_Csp3" id="yourCsp3" style="float:left;"><span class="RIF_Field RIF_State" id="yourState" style="display: none;"><label class="fldLbl" id="yourStateLabel">Other Address Information:</label><br>
      <span style="white-space: nowrap;"><input type="text" size="15" maxlength="15" id="yourStateValue" name="yourState" onchange="null" onfocus="null" onblur="null" tabindex="0" class="ui-autocomplete-input" autocomplete="off"><img alt="" height="9" id="yourStateReqdImg" src="/img/1.gif" width="11"></span></span></div>
    </div>
    <div class="col-sm-6"><div></div>
    </div>
  </div>

  <div class="row"><div class="col-sm-6"><br style="clear:both;">
    <div class="RIF_Field RIF_Phone" id="yourPhone" style="float:left;width:300px;"><label class="fldLbl" id="yourPhoneLabel">Telephone:</label><br>
      <span style="white-space: nowrap;"><input id="yourPhoneValue" maxlength="15" name="yourPhone" size="15" style="width:300px;" type="text"><img alt="" height="9" id="yourPhoneReqdImg" src="/img/1.gif" width="11"></span></div>
    <div class="RIF_Field RIF_Extension" id="yourExtension" style="float:left;width:100px;"><label class="fldLbl" id="yourExtensionLabel">Ext.:</label><br>
      <span style="white-space: nowrap;"><input id="yourExtensionValue" maxlength="5" name="yourExtension" size="5" style="width:100px;" type="text"><img alt="" height="9" id="yourExtensionReqdImg" src="/img/1.gif" width="11"></span></div>
    </div>
    <div class="col-sm-6"><br style="clear:both;">
      <div class="RIF_Field RIF_Email" id="yourEmail" style="float:left;width:400px;"><label class="fldLbl" id="yourEmailLabel">E-mail:</label><br>
        <span style="white-space: nowrap;"><input id="yourEmailValue" maxlength="50" name="yourEmail" size="32" style="width:400px;" type="text"><img alt="" height="9" id="yourEmailReqdImg" src="/img/1.gif" width="11"></span></div>
    </div>
  </div>   
</div>

thank you for the suggestion, but it does not work all the same. — Len Yabloko, Oct 14 '15 at 15:55
I expect the .row containing "Other Address Information" to be hidden as a result of `row.hide()` , as well as _nothing is visible_ in the console — Len Yabloko, Oct 14 '15 at 16:05
You are never calling `row.hide()` because `hidden` is set to false in the loop above that condition. `hidden` is always set to false whenever `cells` has one or more item in it. Perhaps you want that `hidden = false` to be set as part of the `if` statement directly above it. — Dave, Oct 14 '15 at 16:07
Thank you, your are right, I made a mistake when adding `console.log($(this).id + " is visible");`. I edited my code and now it hides the row. I still don't understand why the console never shows the _... is visible_. — Len Yabloko, Oct 14 '15 at 16:21
Because the only `span.RIF_Field` you have on the page is `display:none`, and therefore hidden. — Dave, Oct 14 '15 at 16:46

Targeting child elements within nested for each loops in jQuery

1 Answers1