如何只选择那些有很多孩子的元素？

Question

在jQuery中，我如何只选择包含特定数量tm['A'] = tm.a1 tm.A.update(tm.a2) print (tm) a1 a2 A 0 astr1 NaN astr1 1 NaN NaN NaN 2 astr2 NaN astr2 3 NaN astr3 astr3 个孩子的div，例如至少两个？

＆＃13;

＆＃13;

p

＆＃13;

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

＆＃13;

div {
  border:1px solid black;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用:has和:nth-child伪类选择器。虽然使用direct child selector(>)来避免嵌套子项。

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

使用jQuery伪选择器:gt

对不起，我是jc的sux，但是在JavaScript中，使用nextElementSibling。基本上它会找到所有<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>

Answer 3

如果你想根据你的问题使用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 here。

Answer 4

您可以使用filter

＆＃13;

＆＃13;

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

＆＃13;

div {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

您可以使用子选择器。另请参阅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>