如何将类应用于容器，使其子元素具有所需的两个类别？

Question

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

<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>

我想将类应用于具有同时拥有first和second类的子元素的div。

因此，这将是修改后的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>

我可以通过使用带有data属性的div来实现，但那似乎不是最好的方式，我相信有一种方法可以使用jquery引擎。

- Viktor Koncsek

Answer 1

使用 :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>

- Rayon

Answer 2

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

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

基本上你的意思是，选择一个具有子元素类“first”和类“second”的div。

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

- Jason Graham

Answer 3

另一种可能的方法是过滤所选元素：

$(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>

- gaetanoM

---

可能是 $('div').filter(function(index, element) { return $(this).children('.first').length == 1 && $(this).children('.second').length == 1; });。 - Rayon

@Rayon 非常感谢。 - gaetanoM

Answer 4

刚刚看到另一篇帖子使用了CSS选择器“+”

你也可以使用“~”，这取决于你需要的是紧接着的下一个（+）还是相邻的某个元素（~）

$('.first ~.second').parent().addClass('addedClass');

- kingd9