Javascript :not selector not working

Question

I have this javascript / jQuery which essentially wraps every 2 <td> elements with <div class="table-half">, however I specifically state in the variable that I do not want this to take effect if the table has a #profileContent parent.

var divs = $("div:not('#profileContent') table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
    divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}

However, for some reason the wrapping still takes place with html in this structure:

<div id='profileContent'>
    <table width="100%" class="form">
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

Any ideas why?

Answer 1

The reason it's not working is because your table is nested in multiple levels of DIV, and the selector is written to match a table that's any descendant of a DIV. The parent matches the ID, so the :not excludes it, but the grandparent does not have that ID, so it's it's not excluded.

Instead of putting the :not around the DIV id, put it around the selector for the table itself.

var divs = $("table.form:not(#clientsummarycontainer table) tr td");

.color {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contentarea Client-Profile" id="contentarea" style="margin-left:209px;">
  <div style="float:left;width:100%;">
    <h1>Client Profile</h1>
  
    <div class="tab-content client-tabs">
      <li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a>
        <ul class="dropdown-menu"></ul>
      </li>
      <div class="tab-pane active" id="profileContent">
        <div id="clientsummarycontainer">
          <div class="clearfix">
          </div>
          <p align="right">
            <input type="button" value="Status Filter: Off" class="btn btn-xs btn-small" onclick="toggleStatusFilter()">
          </p>
          <div id="statusfilter">
            <form>
              <div class="checkall">
                <label class="checkbox-inline">
                  <input type="checkbox" id="statusfiltercheckall" onclick="checkAllStatusFilter()" checked=""> Check All</label>
              </div>
            </form>
          </div>
          <form method="post" action="/redacted/clientssummary.php?userid=redacted&amp;action=massaction">
            <input type="hidden" name="token" value="redacted">
            <table width="100%" class="form">
              <tbody>
                <tr>
                  <td colspan="2" class="fieldarea" style="text-align:center;"><strong>Products/Services</strong></td>
                </tr>
                <tr>
                  <td align="center">
                    <div class="tablebg">
                      <table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
                        <tbody>
                          <tr>
                            <th width="20">
                              <input type="checkbox" id="prodsall">
                            </th>
                            <th>ID</th>
                            <th>Product/Service</th>
                            <th>Amount</th>
                            <th>Billing Cycle</th>
                            <th>Signup Date</th>
                            <th>Next Due Date</th>
                            <th>Status</th>
                            <th width="20"></th>
                          </tr>
                          <tr>
                            <td>
                              <input type="checkbox" name="selproducts[]" value="redacted" class="checkprods">
                            </td>
                            <td><a href="clientsservices.php?userid=redacted&amp;id=redacted">redacted</a></td>
                            <td style="padding-left:5px;padding-right:5px">redacted 7 Day Free Trial - <a href="http://(No Domain)" target="_blank">(No Domain)</a></td>
                            <td>$0.00 USD</td>
                            <td>Free</td>
                            <td>01/06/2016</td>
                            <td>-</td>
                            <td>Active</td>
                            <td>
                              <a href="clientsservices.php?userid=redacted&amp;id=redacted"><img src="images/edit.gif" width="16" height="16" border="0" alt="Edit"></a>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <table width="100%" class="form">
              <tbody>
                <tr>
                  <td colspan="2" class="fieldarea" style="text-align:center;"><strong>Addons</strong></td>
                </tr>
                <tr>
                  <td align="center">
                    <div class="tablebg">
                      <table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
                        <tbody>
                          <tr>
                            <th width="20">
                              <input type="checkbox" id="addonsall">
                            </th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Amount</th>
                            <th>Billing Cycle</th>
                            <th>Signup Date</th>
                            <th>Next Due Date</th>
                            <th>Status</th>
                            <th width="20"></th>
                          </tr>
                          <tr>
                            <td colspan="9">No Records Found</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <table width="100%" class="form">
              <tbody>
                <tr>
                  <td colspan="2" class="fieldarea" style="text-align:center;"><strong>Domains</strong></td>
                </tr>
                <tr>
                  <td align="center">
                    <div class="tablebg">
                      <table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
                        <tbody>
                          <tr>
                            <th width="20">
                              <input type="checkbox" id="domainsall">
                            </th>
                            <th>ID</th>
                            <th>Domain</th>
                            <th>Registrar</th>
                            <th>Registration Date</th>
                            <th>Next Due Date</th>
                            <th>Expiry Date</th>
                            <th>Status</th>
                            <th width="20"></th>
                          </tr>
                          <tr>
                            <td colspan="9">No Records Found</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <table width="100%" class="form">
              <tbody>
                <tr>
                  <td colspan="2" class="fieldarea" style="text-align:center;"><strong>Current Quotes</strong></td>
                </tr>
                <tr>
                  <td align="center">
                    <div class="tablebg">
                      <table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
                        <tbody>
                          <tr>
                            <th>ID</th>
                            <th>Subject</th>
                            <th>Date</th>
                            <th>Total</th>
                            <th>Valid Until Date</th>
                            <th>Status</th>
                            <th width="20"></th>
                          </tr>
                          <tr>
                            <td colspan="7">No Records Found</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="btn-container">
              <div class="button-container">
                <input type="button" id="massUpdateItems" value="Mass Update Items" class="button btn btn-default" onclick="$('#massupdatebox').slideToggle()">
                <input type="submit" name="inv" value="Invoice Selected Items" class="button btn btn-warning">
                <input type="submit" name="del" value="Delete Selected Items" class="button btn btn-danger">
              </div>


            </div>
          </form>
        </div>
        <script language="javascript">
          $(document).ready(function() {
            $("#prodsall").click(function() {
              $(".checkprods").attr("checked", this.checked);
            });
            $("#addonsall").click(function() {
              $(".checkaddons").attr("checked", this.checked);
            });
            $("#domainsall").click(function() {
              $(".checkdomains").attr("checked", this.checked);
            });
          });

        </script>
      </div>
    </div>
  </div>
  <div class="clear"></div>
</div>

Answer 2

After a few more hours of playing around, I finally figured out something that works, although I don't know if it's really the best way of accomplishing what I'm after (I'm thinking it's probably not) nor do I know how efficient it is:

var divs = $("table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
  if ($('table.form').parents('#clientsummarycontainer').length == 0) {
    divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
  }
}