如果没有包含类的子元素，则为父类提供

Question

我有一个元素列表，如果其中的子元素没有分配给它，我想给父元素一个类。这可能与jQuery或vanilla JS一起使用吗？

<tr>
 <td class="unfoldedlabel" colspan="6"><a>Accessories</a></td>
</tr>

<tr>
 <td class="foldedlabel" colspan="6"><a>Accessories</a></td>
</tr>

<tr>
 <td><a>Accessories</a></td>
</tr>

Answer 1

您可以使用 :has() 和 :not()

$('tr:has(>:not(td[class]))').addClass('class')

.class {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="unfoldedlabel" colspan="6"><a>Accessories</a>
    </td>
  </tr>

  <tr>
    <td class="foldedlabel" colspan="6"><a>Accessories</a>
    </td>
  </tr>

  <tr>
    <td><a>Accessories</a>
    </td>
  </tr>
</table>

Answer 2

试试这个：您可以遍历tr并检查它是否具有特定类的子项，如果没有，则将类添加到其中。

$('tr').each(function(){
  if($(this).children('.childClass').length ==0)
    $(this).addClass('parentClass');
});

Answer 3

您可以使用has()和not()选择器

＆＃13;

＆＃13;

$('tr').not(':has(td[class])').addClass('no');

＆＃13;

tr.no {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="unfoldedlabel" colspan="6"><a>Accessories</a>
    </td>
  </tr>

  <tr>
    <td class="foldedlabel" colspan="6"><a>Accessories</a>
    </td>
  </tr>

  <tr>
    <td><a>Accessories</a>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;