jquery not(:contains) 不适用于嵌套 html table

Question

我有一个嵌套的 HTML table，其中第 4 列是嵌套的 HTML table.

我正在根据提供的条件过滤记录并将无效记录着色为红色。

这个 jquery 解决方案在我删除嵌套的 HTML table 时效果很好，但是在 TD 中使用 HTML table 它似乎不起作用.

有人可以告诉我为什么吗？任何帮助将不胜感激。

<div id="divQualCodeFuncPMType">
    <table class="SetDWPParameterTabStyle">
        <tbody>
            <tr class="GridHeaderSystemParamter">
                <td>
                    Map Id
                </td>
                <td>
                    Type Id
                </td>
                <td>
                    Material Type
                </td>
                <td>
                    Attributes
                </td>
            </tr>
            <tr>
                <td>
                    <span id="Label1">10</span>
                </td>
                <td>
                    <span id="Label2">60</span>
                </td>
                <td>
                    <span id="Label3">Paper</span>
                </td>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <span id="Label4">80% cotton</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span id="Label5">20% cotton</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="Label6">20</span>
                </td>
                <td>
                    <span id="Label7">70</span>
                </td>
                <td>
                    <span id="Label8">Box</span>
                </td>
                <td>
                </td>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <span id="Label9">60% cotton</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span id="Label10">40% cotton</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="Label11">20</span>
                </td>
                <td>
                    <span id="Label12">70</span>
                </td>
                <td>
                    <span id="Label13">Wood</span>
                </td>
                <td>
                </td>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <span id="Label14">80% cotton</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span id="Label15">20% cotton</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="Span1">20</span>
                </td>
                <td>
                    <span id="Span2">70</span>
                </td>
                <td>
                    <span id="Span3">Wood</span>
                </td>
                <td>
                </td>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <span id="Span4">80% cotton</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span id="Span5">20% cotton</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="Span6">20</span>
                </td>
                <td>
                    <span id="Span7">70</span>
                </td>
                <td>
                    <span id="Span8">Wood</span>
                </td>
                <td>
                </td>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <span id="Span9">80% cotton</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span id="Span10">20% cotton</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

var x = "Box";
var y = "80";
var $el = $('#divQualCodeFuncPMType > table tbody tr:gt(0)').filter(function(){
    return $(this).find('td:nth-child(3) span:not(:contains("' + x + '"))').length || $(this).find('td:nth-child(4) span:not(:contains("' + y + '"))').length;
});
$el.css("color", "red");

Answer 1

问题在于使用后代选择器而不是直系子代：

例如

> table tbody tr:gt(0)

而不是

> table > tbody > tr:gt(0)

否则它将包括任何后代中任何 tbody 中的所有第一行等

同样适用于

td:nth-child(3) span:not(:contains("' + x + '"))

应该是

> td:nth-child(3) > span:not(:contains("' + x + '"))

还有最后一个选择器：

> td:nth-child(4) span:not(:contains("' + y + '"))

需要

> td:nth-child(4) > span:not(:contains("' + y + '"))

http://jsfiddle.net/TrueBlueAussie/vmrbknf8/5/

Answer 2

尝试使用更具体的选择器规则 - 子选择器而不是后代选择器。

您应该只迭代外部 table 的直接 tr 子级，而不是内部 table 的 tr 子级，因此不应使用后代选择器tr 元素。

var x = "Box";
var y = "80";
var $el = $('#divQualCodeFuncPMType > table > tbody > tr:gt(0)').filter(function() {
  return !$(this).find('td:nth-child(3) span:contains("' + x + '")').length || !$(this).find('> td:nth-child(4) span:contains("' + y + '")').length;
});
$el.css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="divQualCodeFuncPMType">
  <table class="SetDWPParameterTabStyle">
    <tbody>
      <tr class="GridHeaderSystemParamter">
        <td>
          Map Id
        </td>
        <td>
          Type Id
        </td>
        <td>
          Material Type
        </td>
        <td>
          Attributes
        </td>
      </tr>
      <tr>
        <td>
          <span id="Label1">10</span>
        </td>
        <td>
          <span id="Label2">60</span>
        </td>
        <td>
          <span id="Label3">Paper</span>
        </td>
        <td>
          <table>
            <tbody>
              <tr>
                <td>
                  <span id="Label4">80% cotton</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span id="Label5">20% cotton</span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <span id="Label6">20</span>
        </td>
        <td>
          <span id="Label7">70</span>
        </td>
        <td>
          <span id="Label8">Box</span>
        </td>
        <td>
          <table>
            <tbody>
              <tr>
                <td>
                  <span id="Label9">60% cotton</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span id="Label10">40% cotton</span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <span id="Label11">30</span>
        </td>
        <td>
          <span id="Label12">80</span>
        </td>
        <td>
          <span id="Label13">Wood</span>
        </td>
        <td>
          <table>
            <tbody>
              <tr>
                <td>
                  <span id="Label14">80% cotton</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span id="Label15">20% cotton</span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <span id="Span1">40</span>
        </td>
        <td>
          <span id="Span2">90</span>
        </td>
        <td>
          <span id="Span3">Tin</span>
        </td>
        <td>
          <table>
            <tbody>
              <tr>
                <td>
                  <span id="Span4">30% cotton</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span id="Span5">70% cotton</span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <span id="Span6">50</span>
        </td>
        <td>
          <span id="Span7">50</span>
        </td>
        <td>
          <span id="Span8">Box</span>
        </td>
        <td>
          <table>
            <tbody>
              <tr>
                <td>
                  <span id="Span9">80% cotton</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span id="Span10">20% cotton</span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

jquery not(:contains) 不适用于嵌套 html table

jquery not(:contains) not working with nested html table

jquery

jquery-selectors