如何将类应用到容器中，使's的子类具有所需的两个类

How to apply class to container that's children have the required two class?

本文关键字：子类 两个 应用      更新时间：2023-09-26

很难解释，但这里有一个例子:

<div>
  <span class='first'>text</span>
  <span>text</span>
</div>
<div>
  <span>text</span>
  <span class='second'>text</span>
</div>
<div>
  <span class='first'>text</span>
  <span class='second'>text</span>
</div>

我想应用一个类到div，它有两个 first和second类的孩子。

这就是修改后的html:

<div>
  <span class='first'>text</span>
  <span>text</span>
</div>
<div>
  <span>text</span>
  <span class='second'>text</span>
</div>
<div class='addedClass'>
  <span class='first'>text</span>
  <span class='second'>text</span>
</div>

我可以通过标记div与data属性，但这似乎不是最好的方式，我相信有一个方法与jquery的引擎。

你可以尝试像这样链接你的jQuery选择器:

$("div").has(".first").has(".second").addClass("addedClass");

所以本质上你是说，选择有一个类为"first"的子元素和一个类为"second"的子元素的div。

示例:http://codepen.io/JasonGraham/pen/xOdRpz

使用 :has 选择

选择至少包含一个与指定选择器匹配的元素的元素 

$('div:has(span.first):has(span.second)').addClass('has')
.has {
  border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <span class='first'>text</span>
  <span>text</span>
</div>
<div>
  <span>text</span>
  <span class='second'>text</span>
</div>
<div>
  <span class='first'>text</span>
  <span class='second'>text</span>
</div>

另一种可能的方法是筛选选定的元素:

$(function () {
  $('div').filter(function(index, element) {
    return ($(this).children('.first').length == 1 && $(this).children('.second').length == 1);
  }).addClass('addedClass');
});
.addedClass {
  background: red;
  }
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div>
    <span class='first'>text</span>
    <span>text</span>
</div>
<div>
    <span>text</span>
    <span class='second'>text</span>
</div>
<div>
    <span class='first'>text</span>
    <span class='second'>text</span>
</div>

因为你正在寻找下一个相邻的选择器元素，你可以使用最短的形式:

$('div').has('span.first+span.second').addClass('addedClass');


$(function () {
  $('div').has('span.first+span.second').addClass('addedClass');
});
.addedClass {
  background: red;
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div>
    <span class='first'>text</span>
    <span>text</span>
</div>
<div>
    <span>text</span>
    <span class='second'>text</span>
</div>
<div>
    <span class='first'>text</span>
    <span class='second'>text</span>
</div>

刚刚看到另一个使用CSS选择器'+'的帖子

你也可以使用'~'，这取决于你是否需要下一个(+)或者相邻的(~)

$('。第一次~接着).parent () .addClass (addedClass);

相关文章：