Question

我有这个javascript / jQuery基本上用<td>包装每个2 <div class="table-half">元素，但是我特意在变量中说明如果表有#profileContent我不希望它生效父节点。

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>");
}

但是，出于某种原因，在这种结构中仍然使用html进行包装：

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

任何想法为什么？

Answer 1

它不起作用的原因是因为你的表嵌套在多个DIV级别中，并且编写选择器以匹配一个表格，该表格是DIV的任何后代。父母与ID匹配，因此:not将其排除，但祖父母没有该ID，因此不排除。

不要将:not放在DIV id周围，而是将其放在表格本身的选择器周围。

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

经过几个小时的游戏，我终于想出了一些有用的东西，虽然我不知道它是否真的是完成我之后的最佳方式（I＆＃ 39;我认为它可能不是）我也不知道它的效率如何：

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>");
  }
}

Javascript：不是选择器不工作

2 个答案: