如何仅与许多孩子一起选择这些元素

Question

在jQuery中，如何仅选择包含特定数量p儿童的div，例如至少两个？

$(".myDiv").css("background-color", "yellow");

div {
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
 <p class="my_p">1</p>
</div>
<div class="myDiv">
 <p class="my_p">1</p>
 <p class="my_p">2</p>
</div>
<div class="myDiv">
 <p class="my_p">1</p>
 <p class="my_p">2</p>
 <p class="my_p">3</p>
</div>

Answer 1

您可以使用:has和:nth-child伪级选择器。虽然使用直接儿童选择器（>）避免筑巢的孩子。

$(".myDiv:has(>:nth-child(2))").css("background-color", "yellow");

div {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
  <p class="my_p">1</p>
</div>
<div class="myDiv">
  <p class="my_p">1</p>
  <p class="my_p">2</p>
</div>
<div class="myDiv">
  <p class="my_p">1</p>
  <p class="my_p">2</p>
  <p class="my_p">3</p>
</div>

---

或根据儿童计数使用filter()方法和过滤器。

$(".myDiv").filter(function() {
  return $(this).children().length > 1;
}).css("background-color", "yellow");

div {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
  <p class="my_p">1</p>
</div>
<div class="myDiv">
  <p class="my_p">1</p>
  <p class="my_p">2</p>
</div>
<div class="myDiv">
  <p class="my_p">1</p>
  <p class="my_p">2</p>
  <p class="my_p">3</p>
</div>

Answer 2

您可以使用filter

$('.myDiv').filter(function() {
   return $(this).children('p').length > 1;
}).css("background-color", "yellow")

div {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="myDiv">
  <p class="my_p">1</p>
</div>
<div class="myDiv">
  <p class="my_p">1</p>
  <p class="my_p">2</p>
</div>
<div class="myDiv">
  <p class="my_p">1</p>
  <p class="my_p">2</p>
  <p class="my_p">3</p>
</div>

Answer 3

您可以使用子选择器。另请参阅api.jquery.com链接以获取更多信息

$(".myDiv:has(>:nth-child(2))").css("background-color", "yellow");

div {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
  <p class="my_p">1</p>
</div>
<div class="myDiv">
  <p class="my_p">1</p>
  <p class="my_p">2</p>
</div>
<div class="myDiv">
  <p class="my_p">1</p>
  <p class="my_p">2</p>
  <p class="my_p">3</p>
</div>

Answer 4

如果要使用jQuery作为您的问题，则是使用.length，例如：

$(".parentSelector > p").length;

更精确：

var allListElements = $('div > p').parent();
$.each(allListElements, function(element) {
  console.log(this);
  if ( $( this ).children().length > 1) {
     $(this).css( "background-color", "red" );
  }
});

plunker在这里。

Answer 5

使用jquery pseudo-selector :gt

对不起，我在jQuery上sux，但这里使用nextElementSibling在JavaScript中。基本上，它进行并找到所有<p>，然后使用nextElementSibling挑出至少一个兄弟姐妹的<p>。然后通过parentNode来标记该小组的父母，以最终突出父母。

摘要

var atLeast = document.querySelectorAll('p');
var qty = atLeast.length;
for (let i = 0; i < qty; i++) {
  var p = atLeast[i];
  var sibs = p.nextElementSibling;
  if(sibs) {
    p.parentNode.style.backgroundColor = 'yellow';
  }
}

div {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
  <p class="my_p">1</p>
</div>
<div class="myDiv">
  <p class="my_p">1</p>
  <p class="my_p">2</p>
</div>
<div class="myDiv">
  <p class="my_p">1</p>
  <p class="my_p">2</p>
  <p class="my_p">3</p>
</div>