jquery - Javascript :not selector not working -
i have javascript / jquery wraps every 2 <td> elements <div class="table-half">, state in variable not want take effect if table has #profilecontent parent.
var divs = $("div:not('#profilecontent') table.form tr td"); for(var = 0; < divs.length; i+=2) { divs.slice(i, i+2).wrapall("<div class='table-half'></div>"); } however, reason wrapping still takes place html in structure:
<div id='profilecontent'> <table width="100%" class="form"> <tr> <td></td> <td></td> </tr> </table> </div> any ideas why?
the reason it's not working because table nested in multiple levels of div, , selector written match table that's descendant of div. parent matches id, :not excludes it, grandparent not have id, it's it's not excluded.
instead of putting :not around div id, put around selector 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&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&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&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>