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
– Len Yabloko, Commented Oct 14, 2015 at 15:38

Dave · Accepted Answer · 2015-10-14 15:58:28Z

0

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>

edited Oct 14, 2015 at 15:58

answered Oct 14, 2015 at 15:33

Dave

11k3 gold badges45 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Len Yabloko Over a year ago

thank you for the suggestion, but it does not work all the same.

Len Yabloko Over a year ago

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

Dave Over a year ago

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.

Len Yabloko Over a year ago

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.

Dave Over a year ago

Because the only span.RIF_Field you have on the page is display:none, and therefore hidden.

Collectives™ on Stack Overflow

Targeting child elements within nested for each loops in jQuery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related