javascript - 如果一个 div 包含所有指定元素，则选择该 div

Question

我正在尝试选择包含 tagOne 和 tagTwo span 元素的 .item div。

我的div结构如下:

<div id="items">

    <div id="block1" class="item">
        <span class="tagOne tag">One</span>
        <span class="tagTwo tag">Two</span>
    </div>

    <div id="block2" class="item">
        <span class="tagOne tag">Java</span>
    </div>

</div>

使用以下 jQuery，我可以单独定位标签(及其父 div)。

var blocks =  $('#items .item');

blocks.filter('.item').find('[class*="tagOne"]').parent();
blocks.filter('.item').find('[class*="tagTwo"]').parent();

但是，一旦我尝试将它们组合起来以将范围缩小到包含它们的 div ，我就没有得到任何结果，而且似乎无法工作找出原因!

blocks.filter('.item').find('[class*="tagOne"][class*="tagTwo"]');

我的理解是，逗号语法将创建一个 OR 表达式，而不创建一个 AND 表达式。我在 AND 表达式之后，因为我只想返回包含所有条件的 div，或者根本不返回任何内容。

---

注意:我这样做是因为我正在基于标签创建一个切换过滤器，并且标准(即 tagOne, tagTwo)是由用户(未显示)，因此最好尝试在一次操作中完成此操作。

---

编辑:将重复的id移至class名称，以使其有效并相应地调整JavaScript代码。

Answer 1

首先，ID 应该是唯一的。现在，标记包含两个 ID 为 tagOne 的元素，这是无效标记。

您可以使用类而不是 ID。

1. 从两个元素中选择任意一个(在本例中为 .tagOne 或 .tagTwo)
2. 使用siblings()选择具有其他类的同级元素
3. 使用closest()选择与选择器匹配的最接近的祖先。

上面的步骤 #1、#2 和 #3 将仅选择那些同时具有 .tagOne 和 .tagTwo 的 .item 元素:后裔。

代码:

$('.tagOne') // Select one of the element
  .siblings('.tagTwo') // Get second element if it is sibling
  .closest('.item') // Get the closest ancestor

$('.tagOne') // Select one of the element
  .siblings('.tagTwo') // Get second element if it is sibling
  .closest('.item') // Get the closest ancestor
  .addClass('selected'); // For Demo purpose

.item {
  color: red;
}
div.selected {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="items">

  <div id="block1" class="item">
    <span class="tagOne tag">One</span>
    <span class="tagTwo tag">Two</span>
  </div>

  <div id="block2" class="item">
    <span class="tagOne tag">Java</span>
  </div>

  <div id="block3" class="item">
    <span class="tagTwo tag">I Love JavaScript</span>
  </div>

</div>

---

您还可以使用过滤器，如下所示。

1. 使用 filter() 迭代所有 .item 元素
2. 使用context selector检查当前 .item 是否具有后代 .tagOne 和 .tagTwo。
3. 使用length jQuery 对象上的属性来获取选择器选择的元素数量。

代码:

$('.item').filter(function() {
  return $('.tagOne', this).length && $('.tagTwo', this).length;
})

// Fiddle: https://jsfiddle.net/tusharj/8tuu1wxs/1/

// Iterate over all elements having item class
$('.item').filter(function() {
  return $('.tagOne', this).length && $('.tagTwo', this).length;
}).addClass('selected');

.item {
  color: red;
}
.selected {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="items">

  <div id="block1" class="item">
    <span class="tagOne tag">One</span>
    <span class="tagTwo tag">Two</span>
  </div>

  <div id="block2" class="item">
    <span class="tagOne tag">Java</span>
  </div>

  <div id="block3" class="item">
    <span class="tagTwo tag">I Love JavaScript</span>
  </div>

</div>

---

如果元素的顺序/顺序是固定的， CSS general sibling selector ~或adjacent sibling selector +可以使用。

$('.tag1 ~ .tag2').closest('.item')

或者

$('.tag1 + .tag2').closest('.item')

// Fiddle: https://jsfiddle.net/tusharj/amdoLfou/1/

$('.tag1 ~ .tag2') // + can also be used instead of ~
  .closest('.item') // Get closest ancestor
  .css('color', 'blue'); // For Demo purpose

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="items">

  <div id="block1" class="item">
    <span class="tag1 tag">One</span>
    <span class="tag2 tag">Two</span>
  </div>

  <div id="block2" class="item">
    <span class="tag1 tag">Java</span>
  </div>

</div>