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>

我想将一个类应用于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>

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

Answer 1

你可以尝试链接你的jQuery选择器：

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

基本上你要说的是，选择具有“first”类的子元素的div以及具有“second”类的子元素。

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

Answer 2

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

Answer 3

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

＆＃13;

$(function () {
  $('div').filter(function(index, element) {
    return ($(this).children('.first').length == 1 && $(this).children('.second').length == 1);
  }).addClass('addedClass');
});

＆＃13;

.addedClass {
  background: red;
  }

＆＃13;

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

＆＃13;

因为您正在寻找next adjacent selector元素，所以您可以使用最短的格式：

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

＆＃13;

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

＆＃13;

.addedClass {
  background: red;
}

＆＃13;

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

＆＃13;

Answer 4

刚刚看到另一篇文章使用CSS选择器'+'

你还可以使用'〜'这取决于你是否需要下一个（+）或邻近的地方（〜）

$（'。first~.second'）。parent（）。addClass（'addedClass'）;

如何将课程应用于容器，该儿童具有所需的两个课程？

4 个答案: